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.

Correlate

$(document) might be the wrong selector... you really want to track mouseleave on document? Why not use the stars? – Brunhilda

He declare selector after event '[id^=star-]' – Gardas

You use prefix attribute selectors (id^=...) when redefining html content instead of suffix selectors ( eg. id$=-full). – Sportswoman

@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-'. – Correlate

it should be $('[id$=-full]') and so on. – Zephyr

@Sportswoman 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. – Correlate

mouseleave event is correctly fire but on mouseenter all star is replaced by star-empty so on mouseleave on last row is interpreted – Gardas

@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. – Correlate

@Benjamin Poignant nope. I track the ID's of the anchor, not the classes of the stars. The id's remain intact. – Correlate

@Correlate Your code may be broken in various ways but without using the correct selectors it will definitely not work. ever. – Sportswoman

Delegated events do not work for SVG? – Brunhilda

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? – Correlate

add a{ display:block; } – Gardas

@Correlate can you see mine code, just you need to hardly do change – Calcic

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/ – Zephyr

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 ( as you have to distinguish between the 'current' and the other anchor in your handler routine, this doesn't make for an answer ). – Sportswoman

Answer 1

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/

Isahella

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. – Correlate

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. – Correlate

Answer 2

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!

Educated

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. – Sportswoman

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! :) – Appling

Answer 3

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

Calcic