jQuery全局事件监听器

jQuery Global Event Listener

本文关键字：监听器 事件 全局 jQuery      更新时间：2023-09-26

我有两个这样的函数:

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之外，它不会看到何时动态创建的元素(触发器)被点击。

如何使事件侦听器全局侦听?

jsFiddle Demo

使用 on

将click处理程序委托给.trigger的所有当前和将来的实例
$("body").on("click",".trigger",function() {
    // do some magic with $(this) element
});

编辑

jsFiddle Demo

回复:你能告诉我如何用on语句创建悬停监听器吗?

悬停在这里确实是一个极端情况。对于流畅的方法，您可以使用$().hover(function(){},function(){})。然而，这不是使用on的情况。为了与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
});

试试这个:

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