Возможная ошибка jQuery - событие все еще вызывается при изменении элемента Class

Question

Вчера я обнаружил потенциальную ошибку с jQuery в этом коде:

$(document).ready(function() {

    $('.likedLink').click(function(){
        return false; 
    });


    $('.likes').click(function(){

        var id = $(this).attr('id');
        var currentLike = id;
        id = id.replace('p','');


        $.ajax({
            type: "POST",
            url: "/posts/like",
            data: "id=" + id,
            success: function(like){
                $('#' + currentLike).html(like).removeClass('likes').addClass('likedLink');
            }
        });


        return false;

    });

});

Пост получает обратно номер и устанавливает HTML-код текущей ссылки, по которой щелкнули, новое значение.Затем я изменяю класс на элементе, чтобы избежать дальнейших нажатий / AJAX-ing.

Теперь код сработал, получил новый HTML-код и даже правильно изменил класс, но событие AJAX по-прежнему вызывалось, когда пользователь/ Я щелкнул по нему, но это был другой класс, поэтому он не должен был запускаться!

Есть идеи, или это ошибка в jQuery?

Кстати, я исправил код, изменив.html() до .replaceWith("<p>" + like + "</p>") но мне было очень любопытно, как это происходит

Answer 1

Это не ошибка!

Ваш селектор оценивается только при его создании.Изменение имени класса позже не приведет к отмене привязки события.

Вам придется отменить привязку:

$.ajax({
    type: "POST",
    url: "/posts/like",
    data: "id=" + id,
    success: function(like){
        $('#' + currentLike).html(like).unbind('click');
    }
});

Нет необходимости даже изменять имя класса.

Answer 2

Когда вы используете click (ярлык для bind("click", handler);), он прикрепляет обработчик к самому элементу, поэтому изменение класса или родительского элемента не повлияет на обработчик.Вы можете попробовать $(".likes").live("click, handler);, который будет запускать этот обратный вызов, только если элемент все еще имеет этот класс

Answer 3

Вам нужно использовать live () или делегат () вместо click ().Функция click () назначает события один раз и не проверяет, изменились ли они.