1

我正在编写一个评估脚本，以便项目可以被评为 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(){
4

1 回答 1

1

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

于 2011-11-10T15:32:14.887 回答