javascript - 将行追加到表后的 jquery 函数

Question

我需要一些帮助，所以我希望你能帮助我。我有一个表格，单击按钮后会以这种方式添加行。

var row = "<tr><td><input class='check_box' type='checkbox'></input>some text<td></tr>";

$('#pl_table').append(row);

我还有 jquery 函数，可以在选中复选框时将类添加到行中。所以这个类有一个背景颜色的 .css 定义。

$('input:checkbox').on('change', function() { 
    if(this.checked) {
        $(this).closest('tr').addClass('selected');
    }
    else{
        $(this).closest('tr').removeClass('selected');
    }
}

问题是添加的行不会调用 on('change') 事件。加载页面时，它会针对已经存在的行进行调用。

为什么会发生这种情况？我的代码有什么问题？感谢您的帮助。

Answer 1

我也遇到过同样的情况，下面给出了解决此问题的步骤，

a.将 $('input:checkbox').on('change' 放入方法中，如下所示，

function BindDynamicEvents()
{
   $('input:checkbox').off('change').on('change', function() { 
    if(this.checked) {
        $(this).closest('tr').addClass('selected');
    }
    else{
        $(this).closest('tr').removeClass('selected');
    }
}
}

b.在 $('#pl_table').append(row) 之后调用此方法，如下所示，

$('#pl_table').append(row);
BindDynamicEvents();

这样就可以解决问题了。

注意:请包含 .off('change') 如代码中所示，以避免事件被多次触发。