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

You can compare 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.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.

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.

Answer 1

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

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