mouseleave not firing after mouseenter changes HTML within anchor

Question

I'm sure I'm overlooking something but I can't seem to get the "mouseleave" event to fire after I replace the html within the anchor tag that triggered the mouseenter.

Adding code here but really it's much simpler if you visit the JSFiddle link below and hover over the star icons.

$(document).ready(function () {
    $(document).on('mouseenter', '[id^=star-]', function () {

        $('[id^=star-]').html('<span class="star star-empty"></span>');

    }).on('mouseleave', '[id^=star-]', function () {

       $('[id^=star-]').html('<span class="star star-full"></span>');

   });
});

Please see JSFiddle here. Simply hover over the star icons and you shall see what I mean.

$(document) might be the wrong selector... you really want to track mouseleave on document? Why not use the stars? — Jochen Schultz, Apr 21 '15 at 09:04
You use prefix attribute selectors (`id^=...`) when redefining html content instead of suffix selectors ( eg. `id$=-full`). — collapsar, Apr 21 '15 at 09:06
@JochenSchultz I believe you are reading it wrong. $(document).on('mouseenter', '[id^=star-]', function () tracks that element that has an ID that begins with 'star-'. — Adergaard, Apr 21 '15 at 09:06
@collapsar maybe so, but changing the code within the mouseleave function to console.log('yo') still doesn't do anything so that really is not relevant. — Adergaard, Apr 21 '15 at 09:08
mouseleave event is correctly fire but on mouseenter all star is replaced by star-empty so on mouseleave on last row is interpreted — Benjamin Poignant, Apr 21 '15 at 09:10
@LShetty and others, please don't stare too much at the code within the mouseleave and instead on why it doesn't fire. I concur of course that I should have correct code within that function but the problem is NOT the code per se but the fact that it doesn't fire. Thanks still for taking the time to answer. — Adergaard, Apr 21 '15 at 09:11
@Benjamin Poignant nope. I track the ID's of the anchor, not the classes of the stars. The id's remain intact. — Adergaard, Apr 21 '15 at 09:12
@Adergaard Your code may be broken in various ways but without using the correct selectors it will definitely not work. ever. — collapsar, Apr 21 '15 at 09:13
ALL: Thanks for trying. I've updated the fiddle link to hold code that should work i.e. you can easily comment out the "mouseenter" code to see that the "mouseleave" code now works. My question remains. Why is not mouseleave working when mouseenter has fired? — Adergaard, Apr 21 '15 at 09:19
@Adergaard can you see mine code, just you need to hardly do change — nirmal, Apr 21 '15 at 09:36
Looks like the hover events don't seem to like innerHTML being changed on the fly! A possible solution would be this [https://jsfiddle.net/2tp704nq/7/](https://jsfiddle.net/2tp704nq/7/) — lshettyl, Apr 21 '15 at 09:51
For the record: Exempting the triggering anchor element from the set of elements whose content is reset makes the handlers work as expected. See [this fiddle](https://jsfiddle.net/vu11b7gz/16/) ( as you have to distinguish between the 'current' and the other anchor in your handler routine, this doesn't make for an answer ). — collapsar, Apr 21 '15 at 10:09

Tushar · Accepted Answer · 2015-04-21T09:31:40.783

3

The mouseleave event works when added

.star {
    display: block;
}

in CSS

Update: Javascript:

$(document).ready(function () {
    $('.rating').on('mouseenter', 'a[id^=star-]', function () {
        console.log('Hello');
        $(this).children('span').addClass('star-empty').removeClass('star-full');
    }).on('mouseleave', 'a[id^=star-]', function () {
        console.log('leave');
        $(this).children('span').addClass('star-full').removeClass('star-empty')
    });
});

Demo: https://jsfiddle.net/zbeyv6fo/

edited Apr 21 '15 at 09:31

answered Apr 21 '15 at 09:13

Tushar

85,780
21
159
179

In a word: no. Please see my updated fiddle link. You can see for yourself that mouseenter works fine. If you comment out mouseenter you can see that mouseleave works. If you have both in place, they do not, regardless of the "display: block;" in css. Thanks still for trying. – Adergaard Apr 21 '15 at 09:20
Marvellous! Thank you so much. Changing $(this) to $('a[id^=star-]') in each function makes it the behaviour I was looking for as well. I accepted your answer as the correct one. Many thanks. – Adergaard Apr 21 '15 at 09:47

Kalish · Answer 2 · 2015-04-21T09:48:40.490

1

I think that the reason why the mouse leave is not working is because the element which triggered the mouse enter event is removed from the DOM before it can trigger the mouseleave event.

you are replacing the html on mouse enter and the events are still delegated but the element is removed and is not the same element which triggered the mouseenter event so mouseleave is never fired!

edited Apr 21 '15 at 09:48

answered Apr 21 '15 at 09:38

Kalish

803
1
8
18

1

I don't think your analysis applies: The anchor elements - which trigger the dlegated events - are not removed/added by the handlers, only their contents are. – collapsar Apr 21 '15 at 10:11
Thank you for your answer! `mouseenter` fires on element which we delete from DOM by `*ngIf`, now it works with `display: none` rule like a charm! :) – Igor Kurkov Oct 07 '21 at 10:52

score 0 · Answer 3 · answered Apr 21 '15 at 09:27

here is your solution try below code

$(document).ready(function () {
    $(document).on('mouseenter', '.star-rating', function () {
console.log('as1s');
        $('[id^=star-]').html('<span class="star star-empty"></span>');

    }).on('mouseleave', '.star-rating', function () {
console.log('as');
        $('[id^=-full]').html('<span class="star star-full"></span>');
        $('[id^=-half]').html('<span class="star star-half"></span>');
        $('[id^=-empty]').html('<span class="star star-empty"></span>');   
   });
});

Your fiddle here

mouseleave not firing after mouseenter changes HTML within anchor

3 Answers3