Question

I am confused on the differences between these two code blocks:

$("#someButton").click(function() {
    var button = this;
    $(button).attr('disabled', 'disabled');
}

$("#someButton").click(function() {
    var button = $(this);
    $(button).attr('disabled', 'disabled');
}

Notice the difference of what the button variable stores. What’s the point of storing $(this) into the button variable instead of just this? In the end, I am still using $(button).jQueryMethod() to manipulate it, not button.jQueryMethod().

Answer 1

The difference isn’t that significant in your example as you are only using the wrapped JQuery object once. This issue becomes more relevant if you need to use the JQuery object many times.

$("#someButton").click(function() {
    var button = this;
    $(button).attr('disabled', 'disabled');
    $(button).someJQueryMethod();
    ...
    $(button).someOtherJQueryMethod();
}

In this case it is better to wrap the object once and cache the results. It is a convention to cache the result in a variable starting with a $ sign to indicate that it contains a wrapped JQuery object.

$("#someButton").click(function() {
    var $button = $(this);
    $button.attr('disabled', 'disabled');
    $button.someJQueryMethod();
    ...
    $button.someOtherJQueryMethod();
}

This way the call to $() is only invoked once. This becomes particularly relevant if the reference is inside a loop.