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完全相同。所以我有点失落。

提前感谢您的任何建议和帮助。

修改

根据Anthony的建议，我调查了live（），但发现它已被弃用，我应该使用on（）。委托方法也建议使用on（）。这就是我的意思。在得到几个错误后，我意识到我的jquery.js只是旧的，所以我更新了它，它就像一个魅力。我只更改了ready（function（）{}）内部的第一行，如下所示：

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

Answer 1

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

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

修改

1 个答案: