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.

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/

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!