动态添加jQuery事件处理程序到动态HTML

Question

我有一个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中时一切正常。但是当我动态创建完全相同的文本时，是的，我已经进行了比较，展开/折叠和动态数据填充就不起作用了；但是我可以在页面上看到我的正确div布局。

我猜我需要在执行$('#treeview').append(data.d);时添加click事件和addClass，但我无法弄清楚如何做到这一点。

- mike

Answer 1

如果你动态地向DOM添加元素，那么绑定到选择器上的现有事件处理程序（例如click）将不起作用。

你需要使用live函数以便捕获新创建的DOM元素的事件。

---

需要注意的是(正如 Zach L 在评论中所提到的), 自 jQuery 1.7之后，live已被废弃，转而使用on。总的建议仍然相同(跟踪动态元素)，只是机制(on与live)已经改变。

- casperOne

---

类似于$(#treeview).live("click", function(){ var o = $(this); o.children('div').toggle(); o.filter('.parent').toggleClass('expanded'); BindGridView($(this).attr('id')); return false; }); - mike

@mike : addClass呢？它没有影响，函数内部的选择器将正常工作（我猜是在寻找父类）。live调用应该可以工作，但从评论中很难看出来。=) - casperOne

@Yads，看起来你的addClass将所有div的id都改成了treeview，这会导致混乱。 - mike

@casperOne，你的实时建议似乎起作用了，但在我能够动态地addClass之前，整个东西都不起作用。 - mike

$('div.tree div').live现在可以正常工作，而不是$('#treeview').live。 - mike

Answer 2

live()已经被弃用。

从文档中得知:

请使用.on()来绑定事件处理程序。 使用较早版本的jQuery的用户应优先使用.delegate()而不是.live()。

- Zach Lysobey

Answer 3

您可以使用 delegate() 或 live() 来绑定动态元素的事件处理程序。在大多数情况下，delegate() 将是最有效的方法，除非您无法预测动态元素在 DOM 中的位置。

- Dominic Barnes

Answer 4

创建动态可点击的对象也曾让我感到困惑。

我也无法使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("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() { // 在此处执行按钮单击操作 });

formResult是已经在页面上的表单ID，而formMessage是在提交表单后动态添加的消息。

该脚本会在表单末尾添加一个按钮，以清除该消息。

- Brian Moreau