动态地将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是在提交表单后显示的动态添加的消息。 该脚本在表单末尾添加一个按钮以清除消息。