动态创建的复选框未触发操作答案

【问题标题】：Action not triggered with checkbox created dynamically动态创建的复选框未触发操作
【发布时间】：2016-01-15 06:15:27
【问题描述】：

当我使用 HTML 创建一个复选框时，该操作会正常触发，但是当我使用 javascript 创建复选框时出现问题（当我使用按钮在表格中添加一行并单击新复选框时）操作不起作用。

这是我的代码：

<HTML>
<HEAD>

<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<SCRIPT>


    $(window).load(function() {

        $('input[name=chk]').change(function() { 
            if ($('input[name=chk]').is(':checked')) {
                alert("checked");   
                }
            else {
                alert("unchecked"); 
            }
        }); 
    });

    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.setAttribute("name","chk");
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        cell3.appendChild(element2);
    }


</SCRIPT>
</HEAD>
<BODY>

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD> 1 </TD>
        <TD> <INPUT type="text" /> </TD>
    </TR>
</TABLE>

</BODY>
</HTML>

谢谢

【问题讨论】：

既然您使用的是jQuery，为什么不使用jQuery 来创建动态元素呢？应该比普通的 JS 方法更简单。
对不起，我有一个问题：为什么当我这样做时：for(var variable in temp_data) { $('#dataTable').on('change', 'input[name='+variable+ ]'，功能（） { ... }）; } 这行不通

标签： javascript jquery html dynamic checkbox

【解决方案1】：

那是因为你的事件处理程序：

$('input[name=chk]').change(function() { ... });

... 仅适用于那些在那个时刻匹配选择器的输入 - 在动态创建的输入存在之前。您可以改为使用附加到父元素（或文档）的委托事件处理程序，在事件发生时检查选择器：

$('#dataTable').on('change', 'input[name=chk]', function() { ... });

.on() method 是在 1.7 版中添加的，因此如果您使用的是旧版本的 jQuery，请改用 .delegate()。（除非您使用的是真正旧版本，1.4.2 之前的版本，在这种情况下，您必须使用.live()。）

【讨论】：

【解决方案2】：

对于动态生成的元素，事件应该从元素或文档对象的静态父对象之一委托，您可以使用on 方法。

$('#dataTable').on('click', 'input[name=chk]', function(){
   // ...
})

【讨论】：

【解决方案3】：

这里的问题是您试图将事件侦听器（.change()）附加到 DOM 中尚不存在的元素。您应该仅在创建 chackbox 后绑定侦听器。

【讨论】：

【解决方案4】：

您需要为您的复选框设置一个 .live 处理程序。此外，在处理程序中，您可以使用 $(this) 获取当前复选框。

你在这里：http://jsfiddle.net/edAv8/

或者您可以使用 .on 处理程序：http://jsfiddle.net/edAv8/1/

【讨论】：

【解决方案5】：

如果您使用的是 jquery 1.7 或更高版本，您应该改用 on() 方法

查看工作fiddle

    $('#dataTable').on('click','input:checkbox',function() { 
        if ($('input[name=chk]').is(':checked')) {
            alert("checked");   
            }
        else {
            alert("unchecked"); 
        }
    });

【讨论】：