Question

我确定我忽略了一些东西，但我似乎无法得到这样的老鼠＆＃34;替换触发mouseenter的锚标记中的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 here。只需将鼠标悬停在星形图标上即可看到我的意思。

Answer 1

添加<{p>时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

这是您的解决方案，请尝试以下代码

$(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

我认为鼠标离开的原因是因为触发鼠标输入事件的元素在触发mouseleave事件之前从DOM中删除。

你正在替换鼠标输入上的html并且仍然委托事件但是元素被移除并且不是触发mouseenter事件的元素，因此mouseleave永远不会被触发！

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

3 个答案: