1

私は評価者のスクリプトを書いているので、アイテムは1から5の星で評価されます。私のスクリプトは最初は機能し、星を現在の評価からマウスオーバーしたものに変更し、マウスを外すと現在の評価に戻ります。しかし、その後、星の上に戻っても変化はありません。（その間、クリックはありません。）

したがって、ホバーが機能し、次にマウスリーブが機能し、マウスリーブは機能し続けますが、ホバーは機能しなくなります。これが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

イベントハンドラー関数がdivのHTMLを置き換えているため、イベントハンドラーがアタッチされてmouseleaveいない新しいDOM要素が作成されます。hoverjQueryのlive()メソッドを使用して、セレクターに一致する新しく作成されたDOM要素にイベントハンドラーを自動的に追加できます。

于 2011-11-10T15:32:14.887 に答える