不会为添加到dom的行选择所有复选框列

Question

我有一个可以动态添加行和列的网格。每列旁边都有一个复选框，检查它是否会选中该列的所有复选框。

看起来像这样：

以下是我通过点击＆＃34;添加其他列＆＃34;添加列的代码按钮。

$('#btnAddCol').click(function () {
    myfrom.find('tr').each(function(){
        var trow = $(this);
        var columnName = $('#colorName').val()
        if(trow.index() === 1){
          trow.append('<th > ' + columnName + ' <input type="checkbox" class="colmaster"/>');
        }else if (trow.index() > 1){
            trow.append('<td><input type="checkbox" name="'+columnName+'" class="child" /></td>');
        }
    });
    iter += 1;
});

以下是选择列中所有复选框的代码。

$('.colmaster').click(function(){
 var idx = $(this).parent().index();
 $('#colorgrid td:nth-child(' + (idx + 1) + ') input.child').prop('checked', this.checked);
})

问题 对于上面屏幕截图中新添加的列justadded，当我选中该复选框时，它似乎没有选中该列中的所有复选框

这是所有事情的工作小提琴：http://jsfiddle.net/y55nn1qx/4/

Answer 1

$('.colmaster').click只会将事件绑定到运行代码时存在的.colmaster元素。尝试这样的事情：

$('#colorgrid').on('click', '.colmaster', function() {
     // insert your .colmaster.click code here
});

Here's the jQuery API reference for on.

Answer 2

将$('.colmaster').click(function(){更改为：

$('.colmaster').live('click', function(){ // jQuery < 1.7

所以在DOM准备好之后添加到DOM的任何.colmaster也可以包括在内。

注意

如果你升级到现代版本的jQuery，你可以使用：

$(document).on('click', '.colmaster', function(){ //jQuery 1.7+

jQuery API Documentation | live