jQuery addClass和removeClass问题

Question

I am having strange issues with jQuery and adding and removing classes. I'm trying to see on success of a json request, that for the particular hyper link, it should call addClass and removeClass to add/remove particular css properties. When I click on it, it NEVER works, but when I try the css classes independently, they work fine. Is there something I'm missing here? Thanks for the input.

$(document).ready(function() {
    $('.add_link').bind("click", function(e) {
        $.getJSON("/add/", function(json) {
            if (json.SUCCESS != null) {
                $(this).removeClass('blue_button_link').addClass('gray_out_button_link');
            }
        });
    });
});

Answer 1

$(document).ready(function() {
    $('.add_link').bind("click", function(e) {
        // cache it in a local variable.
        var $this = $(this);
        $.getJSON("/add/", function(json) {
            if (json.SUCCESS != null) {
                $this.removeClass('blue_button_link').addClass('gray_out_button_link');
            }
        });
    });
});

Answer 2

In event handler you have another context, so you cannot use this how you want. Try:

$(document).ready(function() {
    var link = $('.add_link');

    link.bind("click", function(e) {
        $.getJSON("/add/", function (json) {
            if (json.SUCCESS != null) {
                link.removeClass('blue_button_link').addClass('gray_out_button_link');
            }
        });
    });
});

Or:

$(document).ready(function() {
    $('.add_link').bind("click", function(e) {
        var link = $(this);

        $.getJSON("/add/", function (json) {
            if (json.SUCCESS != null) {
                link.removeClass('blue_button_link').addClass('gray_out_button_link');
            }
        });
    });
});