jQuery全局事件监听器

Question

我有两个函数如下：

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之外，它就无法看到动态创建的元素（触发器）何时被点击。

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

- user3695709

---

更多重复问题：https://dev59.com/nHVC5IYBdhLWcg3wtzqs，https://dev59.com/k2cs5IYBdhLWcg3wdzxm - Felix Kling

Answer 1

jsFiddle演示

使用on将点击事件处理程序委托给当前和未来的.trigger实例。

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

---

编辑

jsFiddle 示例

关于使用 on 语句创建 hover 监听器，请问您能否提供建议？

在这里，hover 确实是一个特殊情况。使用流畅的方法，您可以使用 $().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
});

- Travis J

---

这个没有起作用，仍然无法看到点击事件。问题仅因为新元素在函数内部被创建而持续存在。如果我也将监听器放在函数内部，那么它就可以看到点击事件了。 - user3695709

@user3695709 - 你的代码肯定还有其他问题。你在控制台里看到任何错误吗？看看这个jsfiddle演示：http://jsfiddle.net/qPYLh/ 它展示了这种方法的工作原理。 - Travis J

对不起，是我的错误。能否请您也建议一下如何使用 on 语句创建 hover 监听器呢？ - user3695709

@user3695709 - 当然，看到修改。 - Travis J

Answer 2

试试这个：

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

- Nept

---

这是做什么的？为什么它能解决 OP 的问题？请解释你的解决方案（以及问题）。 - Felix Kling

因为触发器类是在加载后添加到DOM中的。因此，需要以某种方式重新检查DOM，以便在单击时查找著名的类并触发相应的事件。 - Nept

这不会重新检查DOM，事件绑定到body，当body听到点击时，它将委托事件给.trigger，因此如果.trigger是目标或目标的祖先，则事件将被执行。 - Popnoodles