Javascript 如何将事件添加到innerHTML？

好的，我正在使用.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";

函数sayHi（）{
警惕（“你好！”）；
}
var checkb=document.getElementById（“检查”）
选中b.innerHTML=“Tets One”；

---

onclick事件不起作用，我得到的错误是：“sayHi未定义”。

您没有在

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>

一个
两个
函数sayHi（）{
警惕（“你好”）；
}
var checkb=document.getElementById（“检查”）
检查b.innerHTML=''；

---

确保将javaScript代码保留在页面底部，否则

文档。getElementById（“checks”）

将找不到

checks

元素

您必须确保

sayHi

在全局范围内定义[根据注释更新]，如果没有看到整个HTML，就无法准确说出错误

您还必须将innerHTMLs-inner“（双引号）更改为“（单引号），以便它成为正确的字符串

看到这把小提琴，它就工作了：

还要注意，在使用

onclick

时，需要提供一个可执行的javascript，而不仅仅是对函数的引用。 本例中的可执行JavaScript是

sayHi（）

，带有括号，使其成为函数调用，而不仅仅是函数名

因此，你必须说：

var checkb = document.getElementById("checks")

---

选中b.innerHTML=“Tets One”

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

函数sayHi（）{
警惕（“你好！”）；
}
var-elem；
var checkb=document.getElementById（“检查”）；
对于（变量i=0；i<10；i++）{
elem=document.createElement（'input'）；
txtElem=document.createTextNode（'box'）；
txtElem2=document.createTextNode（i）；
brElem=document.createElement（'br'）；
elem.type='复选框'；
元素id=‘测试’+i；
元素名称='chk'+i；
elem.onclick=sayHi；
检查b.附加子项（elem）；
检查b.appendChild（txtElem）；
检查b.appendChild（txtElem2）；
检查B.附加儿童（brElem）；
}

你不使用什么

Jquery是一个很棒的Javascript库。它将帮助您轻松地操作DOM。 看看你的代码应该是怎样的Jquery风格：

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

var cb=$（''）.onclick（sayHi）；
$（“#支票”）。追加（cb）；

@apsillers，我同意或反斜杠。试试看

onclick='sayHi（）；'

是否有效。请看。好。如果你这样做，它会起作用：document.getElementById（“test”）。onclick=sayHi（）；但如果您有多个复选框，则它仅适用于第一个复选框。如何使它适用于所有复选框checkboxes@PM77-只要

sayHi

函数是全局函数，1的解决方案就可以工作。thnx我将脚本保存在外部文件中，无论

sayHi

函数是高于还是低于此值，因为直到事件发生。但它确实需要是全局的。没错，它需要是全局的

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