mouseleave не срабатывает после того, как mouseenter меняет HTML-код в ядре

Question

Я уверен, что я что-то пропускаю, но я не могу заставить событие «mouseleave» запускаться после замены html в теге привязки, который запускал mouseenter.

Добавление кода здесь, но на самом деле это намного проще, если вы посетите приведенную ниже ссылку 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 here. Просто наведите указатель мыши на значки звезды, и вы увидите, что я имею в виду.

Answer 1

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

.star { 
    display: block; 
} 

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

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

Answer 2

здесь ваше решение попробовать ниже код

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

Ваш fiddle здесь

Answer 3

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

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