jquery mouseleave 导致其他脚本停止工作？

Question

我正在编写一个评级脚本，以便可以对项目进行 1 到 5 星评级。我的脚本首先起作用，导致星星从当前评级更改为鼠标悬停的任何评级，然后在鼠标移出时返回当前评级。但随后，盘旋回到星星上空并不会造成任何变化。 （同时没有点击。）

因此，悬停有效，然后 mouseleave 有效，然后悬停不再有效，尽管 mouseleave 继续工作。这是我的 javascript 文件中的代码：

$(document).ready(function(){
    $("img.rateImage").hover(function(){
        $(this).attr("src","images/vote-star.png");
        $(this).prevAll("img.rateImage").attr("src","images/vote-star.png");
        $(this).nextAll("img.rateImage").attr("src","images/vote-star-off.png");
    });

    $("div#invRate").mouseleave(function(){
        var rate = $(this).attr("ref");
        var i = 1;
        var imgs = "";
    
        while (rate > 0){
            imgs += "<img class=\"rateImage\" id=\"vote"+i+"\" src=\"images/vote-star.png\" alt=\""+i+"\" style=\"cursor:pointer;\" /> ";
            i++;
            rate--;
        }
        while (i < 6){
            imgs += "<img class=\"rateImage\" id=\"vote"+i+"\" src=\"images/vote-star-off.png\" alt=\""+i+"\" style=\"cursor:pointer;\" /> ";
            i++;
        }
        $(this).html(imgs);
    });
});

这是 div 标签和代码，所有这些都发生在其中：

<div style="display:block; text-align:center;" id="invRate" ref="<?= $curRate; ?>">
    <?
    while ($curRate > 0){?>
        <img class="rateImage" id="vote<?= $i ?>" src="images/vote-star.png" alt="<?= $i ?>" style="cursor:pointer;" />
        <? $i ++;
        $curRate --;
    }

    while ($i < 6){?>
        <img class="rateImage" id="vote<?= $i ?>" src="images/vote-star-off.png" alt="<?= $i ?>" style="cursor:pointer;" />
        <? $i ++;
    }
    ?>
</div>

是否有任何原因 mouseleave 事件会导致悬停事件停止工作？ mouseleave 事件传回 div 标签的 html 与开始时的 html 完全相同。所以我有点迷失了。

预先感谢您的任何建议和帮助。

编辑

根据安东尼的建议，我研究了 live() 但发现它已被弃用，我应该使用 on()。委托方法还建议使用 on()。所以我就这么选择了。在遇到几个错误后，我意识到我的 jquery.js 太旧了，所以我更新了它，它就像一个魅力。我只将ready(function(){})内部的第一行更改为：

$("#invRate").on("hover","img.rateImage",function(){

Answer 1

您的 mouseleave 事件处理程序函数正在替换 div 的 HTML，从而创建不再附加 hover 事件处理程序的新 DOM 元素。您可以使用 jQuery 的 live() 方法自动将事件处理程序添加到与选择器匹配的任何新创建的 DOM 元素中。