Указатель мыши не срабатывает после того, как указатель мыши меняет HTML в привязке

Question

Я уверен, что я что-то пропускаю, но я не могу заставить событие "mouseleave" сработать после того, как я заменю HTML-код внутри тега привязки, который вызвал указатель мыши.

Добавление кода здесь, но на самом деле это намного проще, если вы перейдете по ссылке JSFiddle ниже и наведите курсор на значки звездочки.

$(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>');

   });
});

Пожалуйста, смотрите JSFiddle здесь. Просто наведите курсор мыши на значки звездочек, и вы поймете, что я имею в виду.

Answer 1

mouseleave событие работает при добавлении

.star {
    display: block;
}

в CSS

Обновление: 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')
    });
});

Демо: https://jsfiddle.net/zbeyv6fo/

Answer 2

Я думаю, что причина, по которой уход из мыши не работает, заключается в том, что элемент, вызвавший событие ввода мыши, удаляется из DOM, прежде чем он сможет вызвать событие mouseleave.

Вы заменяете html при вводе с помощью мыши, и события по-прежнему делегируются, но элемент удаляется и не является тем же элементом, который вызвал событие mouseenter, поэтому mouseleave никогда не запускается!

Answer 3

Вот ваше решение попробуйте ниже код

$(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>');   
   });
});

Твоя скрипка здесь