jquery mouseleave, заставляющий другой скрипт перестать работать? - PullRequest
Новая
       15

jquery mouseleave, заставляющий другой скрипт перестать работать?

1 голос
/ 10 ноября 2011

Я пишу сценарий оценки, чтобы предметы могли быть оценены от 1 до 5 звезд. Мой сценарий сначала работает, заставляя звезды переходить от текущего рейтинга к тому, на что они наведены, а затем обратно к текущему рейтингу при наведении курсора. Но затем, нахождение над звездами не вызывает изменений. (Пока нет кликов.)

Так что hover работает, затем mouseleave работает, затем hover больше не работает, хотя 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 может перестать работать при наведении? HTML-код, который событие mouseleave передает обратно тегу div, - это тот же HTML-код, что и для начала. Так что я как бы потерялся.

Заранее спасибо за любые предложения и помощь.

EDIT

По совету Энтони я посмотрел на live (), но обнаружил, что он устарел и что мне следует использовать on (). Метод делегата также предлагает использовать on (). Так вот с чем я пошел. После получения пары ошибок я понял, что мой jquery.js был просто старым, поэтому я обновил его, и он работал как шарм. Я изменил только первую строку внутри ready (function () {}), чтобы она выглядела так: 

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

1 Ответ

1 голос
/ 10 ноября 2011

Ваша функция обработчика событий mouseleave заменяет HTML-код div, создавая тем самым новые элементы DOM, к которым больше не присоединен обработчик событий hover.Вы можете использовать метод jQuery live(), чтобы автоматически добавлять обработчик событий ко всем вновь созданным элементам DOM, которые соответствуют селектору.

...