使用jquery将事件附加到未来元素[重复]

Question

我正在使用 jquery 1.8 并且当用户单击带有类下拉切换的某些区域时必须显示弹出窗口。我在第一次加载页面时使用 on 附加了事件。

这里是

$('.dropdown-toggle').on("click", function (e) {
console.log("dropdown toggle called");
$(this).next('.dropdown').toggle();
});
$(document).on("click", function (e) {
var target = e.target;
console.log("click toggle called");
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').hide();
}
});

我发现第二个事件适用于将来添加的元素，但第一个事件不适用于稍后添加的下拉菜单，只有“单击切换调用”会打印在控制台中，但对于那些在启动期间添加的元素“单击切换调用”和“下拉切换调用”被打印出来。

这里有什么问题？ on 是否仅适用于未来元素的文档，或者它也可以应用于类或其他元素，以便它们适用于未来元素？如果不是，解决办法是什么？

Answer 1

您可以将委托与.on() 一起使用。这样，它会在document 中侦听点击（它也可以是元素的父元素，只要它在事件处理程序运行时存在），在触发时查找指定为 .on().

试试这个：

$(document).on("click", '.dropdown-toggle', function (e) {