jQuery .on() 点击事件未触发答案

【问题标题】：jQuery .on() click event not firingjQuery .on() 点击事件未触发
【发布时间】：2013-01-06 11:37:44
【问题描述】：

我正在开发一个在地图上显示事件的网站。当用户将鼠标悬停在事件图钉上时，会显示一个工具提示信息窗口并提供事件信息。当用户点击图钉时，他们应该被放大到更靠近事件。

我在除 Firefox 之外的所有浏览器上都有此功能。由于某种原因，每个图钉 div 的单击事件都不会触发。这特别奇怪，因为 mouseover 事件触发没有问题。我也没有看到任何错误。

$(document).on('click', 'div.pushpin', function () {
  alert('Detected a click!');
});


$(document).on('mouseover', 'div.pushpin', function () {
  // Displays tooltip
});

这是我的网站：http://www.raveradar.com/qa

您可以比较它在 Chrome 和 Firefox 中的工作方式以查看问题。

我试图通过创建一个 jsFiddle 来隔离问题。但是点击事件触发没有问题：http://jsfiddle.net/acraswell/9TxQg/4/

此时我真的可以用第二双眼睛检查我的工作了。

编辑： 我刚刚意识到，如果您禁用“位置：固定；” "pushpin-icon" 图像上的 CSS 属性，突然单击该图标可以正常工作。

编辑 2： 我已经设法解决了这个问题，请参阅下面的解决方案。我会将答案奖励给任何能够解释为什么原始代码一开始就被破坏的人，因为这是真正的问题。

【问题讨论】：

好的，我刚刚注意到，如果我点击红色的“警报”圆圈，表示图钉集群中有多少事件，点击事件会正确注册......但点击图钉图标不起作用。不应该有任何覆盖元素，注意 mouseover 事件触发没有问题。
为我工作，firefox 17.0.1，linux
也许你已经知道了，但是当我在 Chrome 中查看时，你的 .pushpin 元素的高度都为 0 ......它们是如何捕获任何事件的？
@ocanal 我的意思是根据 Chrome 开发者工具中的计算样式的高度。但你是对的，他们有确实有高度的子元素，这就是他们如何拿起鼠标悬停/单击事件。我会检查这些子元素是否在浏览器中正确定位（它们具有相对或固定定位）并且可能没有自己的事件处理程序干扰.pushpin 元素上的处理程序。
在 Firefox 上查看它 sometimes 似乎仅在我单击警报圈的中间而不是边缘（由填充物制成）时才起作用，所以我想知道如果 FF 如何处理填充元素上的点击有一些特殊性。

标签： javascript jquery .net twitter-bootstrap asp.net-mvc-4

【解决方案1】：

编辑

我想我已经为你缩小了范围在你的 css 中，我注意到你使用了 pointer-events: all;，根据 mozilla 的说法是实验性的

警告：在 CSS 中对非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案的一部分规范，但由于许多未解决的问题，已推迟到 CSS4。

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

我认为这就是导致 Firefox 出现问题的原因，将它们从你的 css 和内联 css 中删除并尝试一下

点击事件仅在您点击数字而不是图像时才有效尝试在图像上绑定点击事件而不是 div.pushpin

$(document).on('click', 'img.pushpin-icon', function () {
  alert('Detected a click!');
});


$(document).on('mouseover', 'div.pushpin', function () {
  // Displays tooltip
});

如果两个事件都在做同样的事情，你可以在 on 上合并事件

   $(document).on('click mouseover', 'img.pushpin-icon', function () {
      alert('Detected a click!');
    });

【讨论】：

尝试将点击事件绑定到“img.pushpin-icon”，但没有结果。它当前绑定到适用于所有其他浏览器的容器 div。我不明白，虽然它不会在 Firefox 中。

【解决方案2】：

您是否尝试过使用特定的 click() 函数而不是 on() 函数？

$("img.pushpin-icon").click(function(){alert("clicky");});

编辑：使用“图钉图标”，而不是图钉

【讨论】：

图钉 div 元素是在 DOM 加载后通过 AJAX 调用动态添加的。特定的 click() 函数将不起作用。但是，是的，我仔细检查以确保：/
不知何故无法评论您的上述问题。
您是否注意到您的标签已损坏？ fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/…" alt''=""> 查看“alt”部分
用 .click() 和 .on() 都试过“img.pushpin-icon”，但没有运气。我需要使用 .on() 函数，以便它绑定到添加到 DOM 的所有未来元素。
好的，现在我弄清楚了为什么它不工作了，但是没有解决方案：每次鼠标悬停在图钉上时，它都会以某种方式重新加载，从 dom 树中删除图钉并而是重新插入一个新的（可能用于鼠标悬停颜色更改等）。所以新插入的图钉还没有点击处理程序，因为它是在你调用 $(...).on() 之后添加到 dom 树中的——这就是问题

【解决方案3】：

经过数小时的故障排除后，我解决了这个问题。以下是我采取的步骤：

1) 如前所述，删除.pushpin-icon 图像上的position: fixed 属性似乎允许触发点击事件。

2) 我将.pushpin-icon 'img' 标签更改为div，并使用'background-image' CSS 属性设置图标图像。

3) 随着position: fixed; 属性的消失，我不得不调整.pushpin 孩子的相对位置。

现在它似乎工作得很好。我仍然不确定为什么它一开始就不起作用，这是真正的问题。我会把答案奖励给任何能弄清楚原因的人。

查看网站上的更改：http://www.raveradar.com/qa

点击任何图钉后，控制台会记录一条消息。

【讨论】：

【解决方案4】：

我观察到您的网站在 firefox 中正确加载了所有内容，但在 Chrome 中却没有。那是你的 onClick() 在 Chrome 中没有被触发的原因。 $(document).on() 将侦听器附加到要加载但尚未加载的元素 going。如果您可以直接将监听器附加到pushpin 而不是document，那么您的监听器将在图钉完成加载后附加到pushpin，然后您的onClick() 将被调用。查看这个其他 SO 问题及其答案，它解决了类似的问题：

Jquery Document.on()

它不能解决你的全部问题，但它确实缩小了范围：Chrome 没有加载你的元素，因此你的 onClick() 没有被触发。如果您能弄清楚 Chrome 为何会这样做，那么您的解决方法就是。同时，您可以将侦听器附加到元素的特定 ID/类

【讨论】：

click 事件也为 firefox 触发，但无法正常工作。