动态表行创建的更改不会触发事件

Question

这里前两行是在html中手动创建的，第三行是动态创建的。切换不适用于动态创建的行。

$(document).ready(function() {
 $('input:checkbox').on("change", function(e) {
    if ($(this).is(":checked")) {
        $(this).closest('tr').find("td.rowC .check").prop("disabled", false);
    } else {
        $(this).closest('tr').find("td.rowC .check").prop("disabled", true);
    }
});});

Answer 1

您应该将toggle事件绑定到所有动态创建的元素。在创建手动创建的行后，将on("change", ... )代码应用于所有'input:checkbox'个元素。

Answer 2

您应该尝试jquery事件委派。它背后的想法是将事件设置在始终存在的父元素上（不动态添加），然后根据子选择器对其进行过滤。您运行的代码会设置ONCE事件，稍后会添加这些元素，因此他们不会设置更改处理程序。

https://learn.jquery.com/events/event-delegation/

Answer 3

它不起作用，因为在事件绑定时文档中不存在第3行元素。

你应该使用“live”（如果是jquery＆lt; = 1.7 http://api.jquery.com/live/ ） 或$(document).on('click', 'input:checkbox', function(){}); （jquery＆gt; 1.7 Alternative to jquery live that can work ）

Answer 4

使用事件委派并从

更改事件绑定

 $('input:checkbox').on("change", function(e) {

到

 $(document).on("change",'input:checkbox', function(e) {