jQuery hover event firing twice on mouse over

Question

I'm trying to temporarily change the contents of a div on hover, using this jQuery:

$(document).ready( function() {
    var $ratingHtml = '';
    $('.userRating').hover(
        function() {
            $ratingHtml = $(this).html();
            alert($ratingHtml);
            $(this).html( 'Log in to rate' );
        },
        function() {
            alert($ratingHtml);
            $(this).html( $ratingHtml );            
        }
    );
});

However on hover, the alert appears twice - first for the original HTML content, then again for the string 'Log in to rate'. It seems like a second mouseover event occurs. How can I work around this?

Does it still do it if you remove the alerts? You could be getting a new event when you dismiss the alert since the element may lose focus when the alert pops up. — tvanfosson, Jan 23 '10 at 21:23
@tvanfosson: No, the alerts were only added for debugging purposes, the same thing happens without them. — DisgruntledGoat, Jan 23 '10 at 23:20
Have you tried changing the text then instead of the html? I see that adding a DIV works, but I wonder if just using `.text()` would work as well. — tvanfosson, Jan 23 '10 at 23:32

DisgruntledGoat · Accepted Answer · 2010-01-29T15:03:35.863

2

I decided to go with a different solution - adding the text in an overlay:

$('.userRating').hover(
    function() {
        $('<div class="loginMsg">Log in to rate</div>').appendTo('.userRating');
    },
    function() {
        $('.loginMsg').remove();
    }
);

With appropriate styles in the CSS.

edited Jan 29 '10 at 15:03

answered Jan 23 '10 at 23:24

DisgruntledGoat

70,219
68
205
290

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

I think that is because of event propagation. See these links on how to avoid it:

How to stop event propagation with inline onclick attribute?

http://snipplr.com/view/2810/stop-event-propagation-stop-an-event-from-bubbling-up/

edited May 23 '17 at 12:19

Community

1
1

answered Jan 23 '10 at 21:23

Sarfraz

377,238
77
533
578

Hmm... is there no "jQuery" way to do this? – DisgruntledGoat Jan 23 '10 at 22:04

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

this question was already asked and answered here @ stackoverflow.com....

you could make use of this jQuery plugin... It will help you with the hover...

edited May 23 '17 at 12:01

Community

1
1

answered Jan 24 '10 at 04:27

Reigel Gallarde

64,198
21
121
139

jQuery hover event firing twice on mouse over

3 Answers3