jQuery全局事件监听器[重复]

Question

tt我有两个这样的功能：

function fn1() {
    $(".element").append("<div class='trigger'></div>");
}

function fn2() {
    $(".element").append("<div class='trigger'></div>");
}

和一位听众：

$(".trigger").click(function() {
    // do some magic with $(this) element
});

问题是如果单击事件侦听器位于 fn1 和 fn2 之外，则在单击动态创建的元素（触发器）时不会看到。

如何让事件监听器全局监听？

Answer 1

jsFiddle Demo

使用on

将点击处理程序委托给.trigger的所有当前和未来实例

$("body").on("click",".trigger",function() {
    // do some magic with $(this) element
});

---

编辑

jsFiddle Demo

Re：您能否建议如何使用 on 语句创建悬停侦听器？

悬停在这里确实是一个极端情况。使用流利的方法，您可以使用$().hover(function(){},function(){})。但是，使用on 的情况并非如此。为了使用它，你实际上必须使用两个单独的委托 mouseenter 和 mouseleave

$("body").on("mouseenter",".trigger",function() {
    // do some magic with $(this) element
});
$("body").on("mouseleave",".trigger",function() {
    // do some magic with $(this) element
});

Answer 2

试试这个：

$("body").on("click", ".trigger", function() {
// do some magic with $(this) element
});