javascript – mouseenter在锚点内更改HTML后不会触发mouseleave

我确定我忽略了一些东西,但是在我替换触发了mouseenter的锚标签中的html之后,似乎无法触发“mouseleave”事件.

在这里添加代码但是如果你访问下面的JSfiddle链接并将鼠标悬停在星形图标上,它实际上要简单得多.

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

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

    }).on('mouseleave',function () {

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

   });
});

请参阅JSFiddle here.只需将鼠标悬停在星形图标上即可看到我的意思.

解决方法

添加时,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',function () {
        console.log('leave');
        $(this).children('span').addClass('star-full').removeClass('star-empty')
    });
});

演示：https://jsfiddle.net/zbeyv6fo/