Question

好的，我正在使用.innerHTML语句向HTML表单添加复选框，我想在单击它时向这些复选框添加一个事件。这是一个示例代码：

<form id="form1">
 <fieldset>
  <select>
   <option value="1">One</option>
   <option value="2">Two</option>
   </select>
   </fieldset>
  <fieldset id="checks"></fieldset>
</form>

我的脚本如下所示：

function sayHi() {
  alert("Hello!");
}

var checkb = document.getElementById("checks")
checkb.innerHTML = "<input type='checkbox' id='test' name='one' onclick='sayHi'>Tets One";

onclick事件不起作用，我收到错误说：＆＃34; sayHi未定义＆＃34;。

Answer 1

这是另一种解决方案，可以解决您的问题您可以在这里尝试（demo）。

function sayHi() {
    alert("Hello!");
}

var elem;
var checkb = document.getElementById("checks");
for (var i = 0; i < 10; i++) {
    elem = document.createElement('input');
    txtElem = document.createTextNode('box');
    txtElem2 = document.createTextNode(i);
    brElem = document.createElement('br');
    elem.type = 'checkbox';
    elem.id = 'test' + i;
    elem.name = 'chk' + i;
    elem.onclick = sayHi;
    checkb.appendChild(elem);
    checkb.appendChild(txtElem);
    checkb.appendChild(txtElem2);
    checkb.appendChild(brElem);
}

Answer 2

您未在onclick事件中调用函数sayHi。尝试添加括号

<form id="form1">
    <fieldset>
        <select>
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </fieldset>
    <fieldset id="checks"></fieldset>
</form>

<script type="text/javascript">
    function sayHi() {
        alert("Hello");
    }

    var checkb = document.getElementById("checks")
     checkb.innerHTML = '<input type="checkbox" id="test" name="one" onclick="sayHi()">';

</script>

确保将javaScript代码保留在页面底部，否则document.getElementById("checks")无法找到checks元素

Answer 3

您必须确保sayHi在全局范围内定义[根据评论更新]，如果没有看到整个HTML，就无法确切地说出错误。

你还必须改变innerHTMLs内部＆＃34; （双引号）到＆＃39; （单引号）使它成为一个合适的字符串。

看到这个小提琴并且它有效：http://jsfiddle.net/BuddhiP/79SMb/

另请注意，使用onclick时，您需要提供可执行的javascript，而不仅仅是对函数的引用。您的案例中的可执行JavaScript是sayHi()，括号使其成为函数调用而不仅仅是函数名。

因此你必须说：

var checkb = document.getElementById("checks")

checkb.innerHTML =＆＃34;＆lt; input type =＆＃39;复选框＆＃39; ID =＆＃39;测试＆＃39;命名=＆＃39;一个＆＃39; onclick =＆＃39; sayHi（）＆＃39;＆gt; Tets One＆＃34 ;;

Answer 4

你不使用JQuery？

Jquery是一个很棒的Javascript库。＆＃39;将帮助您轻松操纵DOM。看看你的代码应该是如何以Jquery风格：

var cb = $('<input type="checkbox" id="test" name="one">').onclick(sayHi);
$("#checks").append(cb);

如何向innerHTML添加事件？

4 个答案: