Ajax see the old class

Question

I've this:

$(".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");
    });

When I click on my button I can see with Firebug the class switch. But if I try to click the button again, it doesn't appear the alert, the script send always the POST request to follow.php.

Why?

score 2 · Accepted Answer · edited May 23 '17 at 12:19

You need to use .live('click', ...) instead of .click(...). The former works for all elements matching that selector, now and in the future, whereas the latter only works for elements matching the selector right now.

It's not a matter of ajax "seeing" the old class, it's how the event listeners are bound. $(".follow").click(callback) finds all the elements in the DOM that have the class follow, and then binds callback to the click event of every such element. Removing the follow class does not remove event listeners.

.live() also binds only one listener, rather than one listener per element in the jQuery object, so it is more "efficient" (read: lighter weight) in that regard.

$(".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");
});

Notes

You can, and should, use this.id instead of $(this).attr("id"). See When to use Vanilla JavaScript vs. jQuery?
Take advantage of jQuery's chainability for more efficient, concise code.

+1 Very thank you, man. You rocks our boats. Thank you also for your notes! — Fred Collins, Jun 04 '11 at 04:33

Ajax see the old class

1 Answers1

Notes