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

Question

我有一个 div 部分，我通过 jQuery ajax 动态填充它:

$('#treeview').append(data.d);

其中数据是一堆具有不同 id 的嵌套 div。

我还有一些 jQuery 代码，可以将 div 变成 TreeView ，并具有 +/- 展开/折叠和动态数据填充:

 $('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 粘贴到主 TreeView div 中时一切都很好。当我动态创建完全相同的文本时，是的，我已经比较了它，展开/折叠和动态数据填充不起作用；但是我可以在页面上看到正确的 div 布局。

我猜我在执行时需要添加点击事件和 addClass

$('#treeview').append(data.d);

但我不知道如何。

Answer 1

如果您要向 DOM 动态添加元素，则绑定(bind)到选择器的现有事件处理程序将不起作用(例如 click)。

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

<小时/>

值得注意的是(as it was in the comments by Zach L)，从jQuery 1.7开始live 已被弃用，取而代之的是 on 。一般建议是相同的(跟踪动态元素)，只是机制(on 与 live)发生了变化。