动态地将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布局.

我猜我需要在我做的时候添加click事件和addClass

$( '#树视图')追加(data.d).

但我无法弄清楚如何.

Answer 1

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

您需要使用该live函数才能捕获来自新创建的DOM元素的事件.

应该注意的是(正如Zach L的评论中所述),jQuery 1.7 live已经被弃用了on.一般建议是相同的(跟踪动态元素),只是机制(onvs live)已经改变.