鼠标进入更改锚点内HTML后，mouseleave事件无法触发

Question

我确定我忽略了某些东西，但我似乎无法在替换触发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。只需将鼠标悬停在星形图标上，您就会明白我的意思。

- Adergaard

---

应该是 $('[id$=-full]') 等等。 - lshettyl

@collapsar 也许是这样，但将 mouseleave 函数内的代码更改为 console.log('yo') 仍然没有任何作用，因此这确实不相关。 - Adergaard

mouseleave事件被正确触发，但是在mouseenter事件中，所有的星号都被替换为star-empty，因此在最后一行上进行mouseleave时会被解释。 - Benjamin Poignant

@LShetty和其他人，请不要过分关注mouseleave函数中的代码，而是要关注为什么它没有触发。当然，我同意在该函数中应该有正确的代码，但问题并不在于代码本身，而是它没有触发。仍然感谢您抽出时间来回答。 - Adergaard

@Benjamin Poignant 不是的。我追踪锚点的ID，而不是星级的类。这些ID保持不变。 - Adergaard

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

Demo: https://jsfiddle.net/zbeyv6fo/

- Tushar

---

总之，不行。请查看我的更新的 fiddle 链接。您可以亲自看到 mouseenter 正常工作。如果您注释掉 mouseenter，则可以看到 mouseleave 工作。如果两者都放置在那里，则无论 css 中的 "display: block;" 如何，它们都不起作用。仍然感谢您的尝试。 - Adergaard

@Adergaard 更新了答案！ - Tushar

太棒了！非常感谢。在每个函数中将$(this)更改为$('a[id^=star-]')，使其具有我所寻找的行为。我接受了您的答案作为正确答案。非常感谢。 - Adergaard

Answer 2

我认为鼠标离开事件无法正常工作的原因是，触发鼠标进入事件的元素在触发鼠标离开事件之前已从DOM中移除。

您正在替换鼠标进入时的HTML，但事件仍然是委派的，但是该元素已被删除，并且不是触发鼠标进入事件的相同元素，因此鼠标离开事件永远不会触发！

- Kalish

---

我认为你的分析不适用：触发委托事件的锚元素并不是由处理程序添加/删除的，只有它们的内容被更改。 - collapsar

谢谢您的回答！ mouseenter 触发了我们通过 *ngIf 从 DOM 中删除的元素，现在通过使用 display: none 规则，它就像魔法般地正常工作了！ :) - Igor Kurkov

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

在这里放置你的fiddle

- nirmal