jQuery全局事件监听器

Question

ttI有两个这样的功能:

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
});

问题是如果click事件侦听器位于fn1和fn2之外,则它不会看到何时单击动态创建的元素(触发器).

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

Answer 1

jsFiddle Demo

将click处理程序委派给所有当前和将来的.trigger使用实例on

$("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
});