twitter-bootstrap jQuery .on() 单击事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14181702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .on() click event not firing
提问by Andrew Craswell
I'm working on a website which displays events onto a map. When the user hovers over an event pushpin, a tooltip info window displays and gives event info. When the user clicks the pushpin, they should be zoomed closer to the event.
我正在开发一个在地图上显示事件的网站。当用户将鼠标悬停在事件图钉上时，会显示一个工具提示信息窗口并提供事件信息。当用户单击图钉时，它们应该放大到更接近事件。
I have this functionality working on all browsers except Firefox. For some reason the click event for each pushpin div does not fire. This is especially odd, because the mouseover event fires without a problem. I'm not seeing any errors either.
我的这个功能适用于除 Firefox 之外的所有浏览器。由于某种原因，每个图钉 div 的点击事件不会触发。这特别奇怪，因为 mouseover 事件触发没有问题。我也没有看到任何错误。
$(document).on('click', 'div.pushpin', function () {
alert('Detected a click!');
});
$(document).on('mouseover', 'div.pushpin', function () {
// Displays tooltip
});
Here is my website: http://www.raveradar.com/qa
这是我的网站：http: //www.raveradar.com/qa
You can compare how it works in Chrome against Firefox to see the issue.
您可以比较它在 Chrome 和 Firefox 中的工作方式以查看问题。
I tried to isolate the problem by creating a jsFiddle. But the click event fires without a problem in the fiddle: http://jsfiddle.net/acraswell/9TxQg/4/
我试图通过创建一个 jsFiddle 来隔离问题。但是点击事件在小提琴中没有问题地触发：http: //jsfiddle.net/acraswell/9TxQg/4/
At this point I could really use a second pair of eyes to check my work.
在这一点上，我真的可以用第二双眼睛来检查我的工作。
EDIT:I've just realized that if you disable the "position: fixed;" CSS property on the "pushpin-icon" image, suddenly clicking the icon works fine.
编辑：我刚刚意识到，如果您禁用“位置：固定；” “图钉图标”图像上的 CSS 属性，突然单击该图标可以正常工作。
EDIT 2:I've managed to resolve the issue, please see my solution below. I will award the answer to anyone who can explain why the original code was broken to begin with since that was the real question.
编辑 2：我已经设法解决了这个问题，请参阅下面的解决方案。我会将答案授予任何能够解释为什么原始代码被破坏的人，因为这是真正的问题。
采纳答案by Andrew Craswell
After hours of troubleshooting I resolved the issue. Here are the steps I took:
经过数小时的故障排除后，我解决了这个问题。以下是我采取的步骤：
1) As previously mentioned, removing the position: fixedattribute on the .pushpin-iconimage seemed to allow the click event to be triggered.
1）如前所述，删除图像position: fixed上的属性.pushpin-icon似乎允许触发点击事件。
2) I changed the .pushpin-icon'img' tag to a div, and used the 'background-image' CSS property to set the icon image.
2) 我将.pushpin-icon'img' 标签更改为 a div，并使用 'background-image' CSS 属性来设置图标图像。
3) With the position: fixed;property gone, I had to adjust the relative positions of the .pushpinchildren.
3）position: fixed;属性没了，我不得不调整.pushpin孩子们的相对位置。
Now it seems to work just fine. I'm still not sure why it wasn't working to begin with, which was the real question. I'll award the answer to anyone who can figure out why.
现在它似乎工作得很好。我仍然不确定为什么它一开始就不起作用，这才是真正的问题。我会把答案奖励给任何能找出原因的人。
See the changes on the site: http://www.raveradar.com/qa
查看站点上的更改：http: //www.raveradar.com/qa
A message is logged to the console upon clicking any pushpin.
单击任何图钉后，将在控制台中记录一条消息。
回答by Nerdroid
Edit
编辑
I think i've narrow it down for you
in your css i noticed you used pointer-events: all;which according to mozilla is experimental
我想我已经在你的 css 中为你缩小了范围我注意到你使用pointer-events: all;了根据 mozilla 是实验性的
Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.
警告：在 CSS 中为非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。
https://developer.mozilla.org/en-US/docs/CSS/pointer-events
https://developer.mozilla.org/en-US/docs/CSS/pointer-events
i think that is what's causing the issue in Firefox remove them from you're css and inline css and try it
我认为这就是导致 Firefox 中出现问题的原因，将它们从你的 css 和内联 css 中删除并尝试一下
the click events workes only if you clicked on the numbers not the imag try binding the click event on the image instead of the div.pushpin
单击事件仅在您单击数字而不是图像时才起作用，尝试将单击事件绑定在图像上而不是 div.pushpin
$(document).on('click', 'img.pushpin-icon', function () {
alert('Detected a click!');
});
$(document).on('mouseover', 'div.pushpin', function () {
// Displays tooltip
});
if both events are doing the same you can combine events in on
如果两个事件都在做同样的事情，你可以将事件结合起来
$(document).on('click mouseover', 'img.pushpin-icon', function () {
alert('Detected a click!');
});
回答by bl?rk
Have you tried to use the specific click() function instead of the on() function?
您是否尝试过使用特定的 click() 函数而不是 on() 函数？
$("img.pushpin-icon").click(function(){alert("clicky");});
EDIT: use "pushpin-icon", not pushpin
编辑：使用“图钉图标”，而不是图钉
回答by sanjeev mk
I observed that your website loads everything properly in firefox , but not in Chrome. Thatis the reason your onClick() is not fired in Chrome. $(document).on() attaches listener to elements that are goingto be loaded, not already loaded. If you can directly attach the listener to the pushpininstead of document, then your listener will be attached to pushpinafter the pushpin has finished loading, and then your onClick() will be called. Check out this other SO question and the answer to it, it resolves a similar issue:
我观察到您的网站在 firefox 中正确加载了所有内容，但在 Chrome 中却没有。这就是您的 onClick() 在 Chrome 中没有被触发的原因。$(document).on() 将侦听器附加到将要加载的元素，而不是已经加载的元素。如果你可以直接将监听器附加到pushpin而不是document，那么你的监听器将pushpin在图钉加载完成后附加到，然后你的 onClick() 将被调用。查看另一个 SO 问题及其答案，它解决了类似的问题：
It does not solve your whole problem, but it does narrow it down to: Your elements are not being loaded by Chrome, hence your onClick() is not fired. If you can figure out why Chrome is doing that, there's your fix. In the meanwhile, you can attach listeners to the specific ID/class of elements
它不能解决您的整个问题，但确实将其缩小到：Chrome 未加载您的元素，因此您的 onClick() 不会被触发。如果你能弄清楚 Chrome 这样做的原因，那就是你的解决办法。同时，您可以将侦听器附加到元素的特定 ID/类
