Аякс увидеть старый класс

Question

У меня есть это:

$(".follow").click(function() {
        var element = $(this);
        var id = element.attr("id");
        var data = "id=" + id;

        $.ajax({
            type: "POST",
            url: "follow.php",
            data: data,
            success: function(result) {
                element.removeClass("follow");
                element.addClass("unfollow");
            }
        });
        return false;
    });

    $(".unfollow").click(function() {
        alert("Hey, dude");
    });

Когда я нажимаю на свою кнопку, я вижу с помощью Firebug переключатель класса. Но если я попытаюсь нажать кнопку еще раз, предупреждение не появится, скрипт всегда отправляет запрос POST для follow.php.

Почему?

Answer 1

Вам нужно использовать .live('click', ...) вместо .click(...). Первый работает для всех элементов, соответствующих этому селектору, теперь и в будущем , тогда как последний работает только для элементов, соответствующих селектору прямо сейчас .

Дело не в том, чтобы ajax "видеть" старый класс, а в том, как связаны слушатели событий. $(".follow").click(callback) находит все элементы в DOM, которые имеют класс follow, а затем связывает callback с событием click каждого такого элемента. Удаление класса follow не удаляет прослушиватели событий.

.live() также связывает только одного слушателя, а не одного слушателя на элемент в объекте jQuery, поэтому он более «эффективен» (читай: меньший вес) в этом отношении.

$(".follow").live("click", function() {
    var element = $(this),
        data = "id=" + this.id;

    $.ajax({
        type: "POST",
        url: "follow.php",
        data: data,
        success: function(result) {
            element.removeClass("follow").addClass("unfollow");
        }
    });

    return false;
});

$(".unfollow").live("click", function() {
    alert("Hey, dude");
});

Примечания

• Вы можете и должны использовать this.id вместо $(this).attr("id"). См. Когда использовать Vanilla JavaScript против jQuery?
• Воспользуйтесь преимуществами цепочки jQuery для более эффективного и лаконичного кода.