添加元素动态后的JQuery绑定事件答案

【问题标题】：JQuery bind event after adding element dynamic添加元素动态后的JQuery绑定事件
【发布时间】：2014-02-01 13:09:18
【问题描述】：

动态添加元素后我遇到了一个问题，它没有点击事件，所以我有以下内容：

$(".myclass > li").click(function () {
    ...
});

所以基本上当我点击 LI 元素时，应该会发生一些事情并且它可以工作。

但是当我向 myclass 添加一个新的 LI 元素时，这个新添加的元素不会调用这个函数。

我的问题是如何将这个新元素重新绑定或绑定到这个函数..？

因为当我点击其他元素时它们会起作用，但只有新元素不起作用......我想这是绑定发生在回发或某事上，但在我的情况下没有回发：/

【问题讨论】：

【解决方案1】：

您需要使用Event Delegation。您必须使用委托事件方法使用.on()。

即

$(document).on('event','selector',callback_function)

你的情况

$(document).on('click', '.myclass > li', function () {
    ...
});

或者如果您想应用于所有列表项：

$(".myclass").on('click', '> li', function () {
    ...
});

【讨论】：

【解决方案2】：

需要使用event delegation来支持动态元素

$(".myclass").on('click', '> li' function () {
    ...
});

【讨论】：

【解决方案3】：

由于元素是在绑定事件后添加的，因此它没有附加处理程序，bind 函数不会侦听任何可能添加的新元素。

因此，您需要使用事件委托。当一个事件触发时，它会一直冒泡到父文档。使用 jQuery .on() 函数，您可以侦听从目标冒出的事件。

在您的情况下，您应该使用以下内容：

$(parent).on("click", "li", function() { ... });

上面将侦听在li 元素上发生的click 事件并冒泡到parent。在事件处理程序内部this 将引用触发事件的li 元素。如果你不认识家长，可以在document收听。

您可以了解更多关于.on()函数here的信息。

【讨论】：