Question

我正在将Leaflet.js用于项目，我想在jQuery on（）上将事件绑定到我的标记上。

我测试了类似的东西：

$('body').on("hover",".leaflet-marker-icon",function(){console.log("foo")}) //doesn't work

但没有任何反应。

另一方面，它直接绑定事件时起作用：

$(".leaflet-marker-icon").hover(function(){console.log("bar")}) //works

我在我的页面的另一个div上测试了jQuery.on（）：

$('body').on("hover",".navbar",function(){console.log("g")}) //no problem

这个工作正常。

有任何线索吗？

Answer 1

似乎传播不会发生。您需要提供更多代码才能获得更精确的答案。现在我怀疑.stopPropagation()被称为某处

Answer 2

试试这个：

$(document).ready(function(){
     $(document).on({
        mouseenter: function(){
           console.log("bar")
        },
        mouseleave: function(){
           console.log("foo")
        }
     }, ".leaflet-marker-icon")
})

请注意，从jQuery 1.8开始：不推荐使用名称“hover”作为字符串mouseenter和mouseleave的简写。

Answer 3

尝试

$(document).on("hover",".leaflet-marker-icon",function(){console.log("foo")});

文档而不是body - 这应该是捕获第一个体载不存在的dom元素事件的正确方法。

Answer 4

我不会使用悬停，而是使用mouseenter。还要确保您至少使用jQuery 1.7+进行此事件委派。此外，body标签应该与您的leaflet-marker-icon类相距1级。这可能是您的navbar类的情况，但您的leaflet-marker-icon类可能不是这种情况。这可能是导航栏工作的原因。无论如何，我们需要这里的完整代码才能提供帮助。

jQuery on（）委托事件和Leaflet.js

4 个答案: