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

我猜我需要添加点击事件＆amp;我正在做

时添加类

$（ '＃树视图'）附加（data.d）;

但我无法弄清楚如何。

Answer 1

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

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

应该注意（as it was in the comments by Zach L）从jQuery 1.7 live开始，已弃用on。一般建议是相同的（跟踪动态元素），只是机制（on vs live）已经改变。

Answer 2

live()已被弃用。

来自docs：

使用.on()附加事件处理程序。旧版jQuery的用户应优先使用.delegate() {。{1}}。

Answer 3

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

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

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

4 个答案: