Javascript 使用jquery和动态内容处理事件

我有一个带有复选框的表，允许编辑所选行中的列。每当我单击该复选框时，就会弹出一个对话框，它应该是这样的。 当我使用Ajax动态更改页面内容时（当我更改表的页面时），问题就开始了。每当我单击“下一步”按钮（以获取表的下一行）时，内容会动态更改，当我单击“编辑”复选框时，对话框不会弹出。我尝试了各种方法来处理这一变化，但在我看来，我做得不对

下面是下一个按钮代码：

    $('#Next').click(function(){
        if(Number($('#Next').attr('n'))+1 >= Number($('#Next').attr('tn'))){
            $('#Next').removeAttr('class');
            $('#Next').attr('class','next disabled');
        }
        var tmp = Number($('#Next').attr('n'));
        $('#Next').removeAttr('n');
        $('#Next').attr('n',(tmp+1).toString());
        $.get("receive.php",{Page: $('#Next').attr('n')}).done(function(data){
            $('tbody').html(data);
            $('#Previous').removeAttr('class');
            $('#Previous').attr('class','previous');
            $.PutRating();
        });

    });

我从php函数收到的数据是新的表内容，但是我不能使用编辑复选框。下面是它的代码：

    $('input.cb').on('change',function(){
        $('input.cb').not(this).prop('checked',false);
        BootstrapDialog.show({
            title: 'Choose Option',
            message: 'Select an option for: <strong>'+$(this).attr('n')+'</strong>. Be careful!',
            draggable: true,
            type: 'type-warning',
            data:{
                'name': $(this).attr('n')
            },
            buttons: [{
                label: 'Edit',
                icon: 'glyphicon glyphicon-pencil',
                cssClass: 'btn-warning',
                action: function(dialogItself){
                    dialogItself.close();
                    $('#ShowForm').trigger('click');
                    $('#ShowForm').hide();
                    $('#Add').text('Save');
                    $('#Add').attr('class','btn btn-success pull-right');
                    $('#Close').show();
                    $.post('receive.php',{GetRow: 'true',Name: dialogItself.getData('name')}).done(function(data){
                        var values = data.split(':');
                        $('#Type').val(values[0]);
                        $('#Name').val(values[1]);
                        $('#Hobby').val(values[2]);
                        $('#Favorite_color').val(values[3]);
                        $('#Favorite_food').val(values[4]);
                        $('#Notes').val(values[5]);
                    });
                }
            }, {
                icon: 'glyphicon glyphicon-trash',
                label: 'Delete',
                cssClass: 'btn-danger',
                action: function(){

                }
            }]
        });
    });

$（'input.cb'）。在（'change'，function（）上{
$（'input.cb'）.not（this）.prop（'checked'，false）；
BootstrapDialog.show({
标题：“选择选项”，
消息：“为：”+$（this.attr（'n'）+”选择一个选项。小心！”，
真的，
类型：“类型警告”，
数据：{
'name'：$（this.attr（'n'））
},
按钮：[{
标签：“编辑”，
图标：“字形图标”“字形图标铅笔”，
cssClass:“btn警告”，
操作：函数（对话框本身）{
dialogself.close（）；
$（'#ShowForm'）。触发器（'click'）；
$（'#ShowForm'）.hide（）；
$（'添加'）.text（'保存'）；
$（'#Add'）.attr（'class'，'btn btn success pull right'）；
$（“#关闭”）.show（）；
$.post（'receive.php'，{GetRow:'true'，Name:dialogothers.getData（'Name'）}）.done（函数（数据）{
var值=data.split（“：”）；
$（'#Type'）.val（值[0]）；
$（'#Name'）.val（值[1]）；
$（'#Hobby'）.val（值[2]）；
$（'最喜欢的颜色'）.val（值[3]）；
$（'最喜欢的食物'）.val（值[4]）；
$（'#Notes'）.val（值[5]）；
});
}
}, {
图标：“glyphicon glyphicon垃圾桶”，
标签：“删除”，
cssClass:“btn危险”，
行动：功能（）{
}
}]
});
});

input.cb是复选框输入。

---

我尝试了.on函数，但它不起作用，我想我不理解它。

是的，因为元素是动态添加的。你必须进行活动授权
如果所有的动态内容都添加到静态容器div中，那么就说它有id#container，可能是这样

 <div id="container">  
    // all your dynamic content gets added inside here 
 </div>

首先是父div，然后是事件，然后是要侦听的元素。正常的语言翻译是“在容器内侦听input.cb的更改事件”
通过使用它，即使您正在侦听的元素是动态添加的，它也会被触发，因为我们在这里进行了事件委派，并引用了一个静态父div（在我们的例子中是它的

#container

）（始终尝试引用最接近的静态父div，该静态父div将仅为了性能而包装整个动态部分）

您可以替换触发事件，如单击，相应地更改

---

注意：确保容器div不是动态地来自ajax，它必须是静态的。

Wow！我无法向你表达我的感激之情。非常感谢，先生！

  $('#container').on('change','input.cb',function(){ 
   // your code 
  });