JavaScript/jQuery: event fired twice

Question

I'm trying some event bindings with jQuery, and I have this simple code in my document ready:

$(document).ready(function() {
    $("p a").each(function(i, selected){
        $(selected).hover(
            function(event) { alert('over: ' + event.type); },
            function(event) { alert('out: ' + event.type); });
        }
    )
});

So, when I move mouse over a link thats inside a paragraph (selector is "p a") alerts pop-up twice. So, mouseenter and mouseleave are fired twice.

This only happens in Google Chrome. In Internet Explorer 7, Firefox 3, Opera and Safari both events are fired only once.

Why is this happening?

score 8 · Answer 1 · answered Oct 28 '11 at 01:14

8

I suppose this doesn't answer your question, but this post came up while researching my own bug. It turned out the problem was that I had inadvertently included an external javascript twice.

Just thought it would be worthwhile to document this for others who have the same problem. An obvious error that took a while to track down!

answered Oct 28 '11 at 01:14

CambridgeMike

4,562
1
28
37

Thanks that was my problem!! ;) +1 – Sebastian Oberste-Vorth Dec 07 '11 at 21:46

score 6 · Accepted Answer · answered Feb 28 '09 at 17:06

6

I think somehow the alert is actually causing the extra events in Chrome. With the following code I only see one event.

$(document).ready(function() {
  $("p a").each(function(i, selected){
    $(selected).hover( 
      function(event) { $("p").append('<br>over: ' + event.type); }, 
      function(event) { $("p").append(' out: ' + event.type); });
    }
  )
});

answered Feb 28 '09 at 17:06

Sam Hasler

12,344
10
72
106

1

Yup - as soon as the alert is shown, another mouseover event is triggered. – Shog9 Feb 28 '09 at 17:09
1

Thanks for your answer. I've checked Safari - there the alert "kills" the mouseleave event... – emirc Feb 28 '09 at 18:34

JavaScript/jQuery: event fired twice

2 Answers2

Linked