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.

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


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

Here is my website:

You can pare how it works in Chrome against Firefox to see the issue.

I tried to isolate the problem by creating a jsFiddle. But the click event fires without a problem in the fiddle: /

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.

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.

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.

$(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./qa

You can pare how it works in Chrome against Firefox to see the issue.

I tried to isolate the problem by creating a jsFiddle. But the click event fires without a problem in the fiddle: http://jsfiddle/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.

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.

• javascript
• jquery
• twitter-bootstrap
• asp-mvc-4

• 1 Okay, I've just noticed that if I click on the red "alert" circle which says how many events are in the pushpin cluster, the click event registers correctly... but clicking on the pushpin icon doesn't work. There shouldn't be any overlaying elements, notice that the mouseover event fires without a problem. – Andrew Craswell Commented Jan 6, 2013 at 11:50
• 1 Wprks for me, firefox 17.0.1, linux – user823738 Commented Jan 6, 2013 at 11:54
• 2 Maybe you know this already but when I look in Chrome, your .pushpin elements all have 0 height... how are they capturing any events at all? – Stuart Commented Jan 6, 2013 at 12:05
• 1 @ocanal I mean the height according to Computed Style in Chrome's Developer Tools. But you're right, they have children elements which do have height and that is how they are picking up the mouse over / click events. I would check whether those children elements are being positioned correctly across browsers (they have relative or fixed positioning) and don't perhaps have their own event handlers interfering with the handlers on the .pushpin elements. – Stuart Commented Jan 6, 2013 at 12:11
• 1 Looking on Firefox it sometimes seems to work only when I click on the middle but not on the edges (which are made of padding) of the alert circles, so I wonder if there's some peculiarity in how FF treats clicks on padded elements. – Stuart Commented Jan 6, 2013 at 12:29

4 Answers 4

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

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.

https://developer.mozilla/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

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

$(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 bine events in on

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

Have you tried to use the specific click() function instead of the on() function?

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

EDIT: use "pushpin-icon", not pushpin

After hours of troubleshooting I resolved the issue. Here are the steps I took:

1) As previously mentioned, removing the position: fixed attribute on the .pushpin-icon image seemed to allow the click event to be triggered.

2) I changed the .pushpin-icon 'img' tag to a div, and used the 'background-image' CSS property to set the icon image.

3) With the position: fixed; property gone, I had to adjust the relative positions of the .pushpin children.

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./qa

A message is logged to the console upon clicking any pushpin.

I observed that your website loads everything properly in firefox , but not in Chrome. That is the reason your onClick() is not fired in Chrome. $(document).on() attaches listener to elements that are going to be loaded, not already loaded. If you can directly attach the listener to the pushpin instead of document, then your listener will be attached to pushpin after 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:

Jquery Document.on()

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