Question

当我使用HTML创建一个复选框时，操作被触发正常，但是当我使用javascript创建复选框时（当我在表格中添加一行按钮并且我点击新复选框时）的操作不起作用。< / p>

这是我的代码：

<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>

谢谢

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

见工作fiddle

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

Answer 5

您需要为复选框设置 .live 处理程序。此外，在处理程序中，您可以使用$（this）来获取当前复选框。

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

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

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

5 个答案: