动态地将jQuery事件处理程序添加到动态HTML中
我有一个div部分,我通过jQuery ajax动态填充:
$('#treeview').append(data.d);
数据是一堆具有不同ID的嵌套div。
我还有一些jQuery代码使div成为树视图,具有+/-展开/折叠和动态数据填充:
$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2! $('div.tree div').click(function() { var o = $(this); o.children('div').toggle(); o.filter('.parent').toggleClass('expanded'); BindGridView($(this).attr('id')); return false; });
问题是当我将div粘贴到主树视图中时,一切都很好。 当我动态创建完全相同的文本时,是的,我比较了它,展开/折叠和动态数据填充不起作用; 但是我可以在我的页面上看到正确的div布局。
我猜我需要在我做的时候添加click事件和addClass
$( ‘#树视图’)追加(data.d)。
但我无法弄清楚如何。
如果要动态地向DOM添加元素,则绑定到选择器的现有事件处理程序将不起作用(例如click
)。
您需要使用live
函数才能捕获新创建的DOM元素中的事件。
应该注意的是( 正如Zach L的评论中所述 ),从jQuery 1.7开始, live
已经被弃用了。 一般建议是相同的(跟踪动态元素),只是机制( on
vs live
)已经改变。
live()
已弃用。
来自文档 :
使用.on()
附加事件处理程序。 旧版jQuery的用户应该使用.delegate()
而不是.live()
。
您可以使用delegate()
或live()
将事件处理程序绑定到动态元素。 在大多数情况下, delegate()
将是最有效的路径,除非您无法预测DOM中动态元素的存在位置。
创建动态可点击对象让我有一段时间了。 我无法使delegate()函数工作。 最后我发现了这个例子http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog
并将其修改为
var buttonClear = $('#formResult').parent().find('#formMessage');
buttonClear.append("");
$("#clear").click(function() {
//点击这里的按钮动作});
formResult是页面上已有的表单ID,formMessage是在提交表单后显示的动态添加的消息。 该脚本在表单末尾添加一个按钮以清除消息。