mouseenter在锚点内改变HTML后不会触发
我确定我忽略了一些东西，但是在替换触发mouseenter的定位标记内的html后，我似乎无法得到“mouseleave”事件触发。
在这里添加代码，但实际上，如果您访问下面的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。 只需将鼠标悬停在星形图标上，即可看到我的意思。
添加时， 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/
这里是你的解决方案尝试下面的代码
$(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>');
});
});
你的小提琴在这里
我认为鼠标离开不工作的原因是因为触发鼠标输入事件的元素在触发mouseleave事件之前从DOM中被移除。
你正在替换鼠标输入的HTML，事件仍然被委托，但元素被删除，并不是触发mouseenter事件的相同元素，所以mouseleave永远不会被解雇！
链接地址: http://www.djcxy.com/p/25745.html上一篇: mouseleave not firing after mouseenter changes HTML within anchor