0

当我使用 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>

谢谢

4

5 回答 5

5

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

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

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

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

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

于 2012-09-26T13:25:04.303 回答
2

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

$('#dataTable').on('click', 'input[name=chk]', function(){
   // ...
})
于 2012-09-26T13:25:32.723 回答
1

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

于 2012-09-26T13:25:22.730 回答
0

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

见工作小提琴

    $('#dataTable').on('click','input:checkbox',function() { 
        if ($('input[name=chk]').is(':checked')) {
            alert("checked");   
            }
        else {
            alert("unchecked"); 
        }
    });
于 2012-09-26T13:23:55.473 回答
0

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

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

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

于 2012-09-26T13:27:51.347 回答