使用 jquery 和动态内容进行事件处理
Event handeling with jquery and dynamic content
我有一个带有复选框的表格,允许编辑所选行中的列。每当我单击该复选框时,都会弹出一个对话框,因为它应该是。当我使用 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 是复选框输入。我尝试了 .on 函数,但它不起作用,我想我不明白它。
是的,发生这种情况是因为元素是动态添加的。你必须做事件委派
如果您的所有动态内容都添加到静态容器div 中,请说它具有 id #container 可能是这样的
<div id="container">
// all your dynamic content gets added inside here
</div>
那么你必须使用这个语法——>
$('#container').on('change','input.cb',function(){
// your code
});
首先是父div,然后是事件,然后是要侦听的元素。正常的语言翻译是"在 #container 内监听input.cb的更改事件"
通过使用它,即使您正在侦听的元素是动态添加的,它也会被触发,因为我们在这里进行了事件委托,并在我们的情况下引用了静态父div #container
(始终尝试引用最接近的静态父级,它将包装整个动态部分只是为了性能考虑)
您可以替换触发事件,例如单击,相应地更改..
注意:确保容器div不是动态来自ajax的,它必须是静态的。
相关文章:
- 实现延迟的jquery更改事件处理程序
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- Jquery事件处理程序仅适用于匿名函数
- 如何在jQuery事件处理程序中存储和重用超时
- jQuery在页面加载时分配点击事件处理程序
- jQuery 事件处理程序堆叠
- jQuery使用.of()删除事件处理程序时出现的问题
- 动态添加对象的jQuery事件处理程序
- jQuery:如何在没有for循环的情况下将事件处理程序应用于$('#text'+'任意整数
- 停止内部事件处理程序冒泡的其他方法,jQuery
- 如何获取 jQuery 以触发本机自定义事件处理程序
- event.stopPropagation() 在 jQuery 事件处理程序中不起作用
- jQuery.one() 事件处理程序未执行
- jQuery $(window).scroll事件处理程序关闭但仍在触发
- Typescript 此关键字在 jquery 事件处理程序中不起作用
- 有没有一种方法可以重新绑定jQuery插件中引用的事件处理程序
- Jquery事件处理程序未启动
- jQuery的事件处理程序运行良好,但应该't,因为它's不在ready()函数中
- 将参数传递给jQuery中的事件处理程序
- jQuery点击事件处理类元素和内部元素