CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
js999
js999

Reputation: 2083

Why are these two ways of writing a jQuery plugin equivalents?

Why are these two ways of writing a jQuery plugin equivalents?

First way:

$.fn.myplugin = function () {
    return $(this).each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

Second way:

$.fn.myplugin = function () {
    return this.bind('click', function () {
        console.log('Hi2');
    });
};

Upvotes: 3

Views: 92

Answers (4)

ThiefMaster
ThiefMaster

Reputation: 318518

In your case there is no real difference except the fact that you create a new jQuery object in your first snippet for no good reason (this is a jQuery object, so no need to use $(this)).

Generally spoken it's a good idea to use return this.each(...); in your plugin function to keep everything chainable and make your code work no matter how many elements there are in the jQuery object on which your plugin's function was called.

Returning this.bind(...) also keeps chainability but for a more complex plugin that does not only just bind an event things are often more readable with the each loop.

Upvotes: 3

Brian Nickel
Brian Nickel

Reputation: 27550

Let's reduce from one to the other:

$.fn.myplugin = function () {
    return $(this).each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

When you start your function this is a jQuery object, so $(this) doesn't buy you anything, it could easily become:

$.fn.myplugin = function () {
    return this.each(function() {
        return $(this).bind('click', function () {
            console.log('Hi');
        });
    });
};

So you are saying "For each element in the jQuery object, create a jQuery object and bind an event to that object."

If you look in bind, it calls on, which performs some logic and finally does this line:

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

That means it is going to apply the event to every element in that jQuery object, so you are actually saying:

So you are saying "For each element in the jQuery object, create a jQuery object, and for every element in that jQuery object bind an event to that element."

You are now looping twice, once in a list of N elements and then N times in lists of 1 element. You can actually just all bind directly:

$.fn.myplugin = function () {
    return this.bind('click', function () {
        console.log('Hi2');
    });
};

And that of course, is the final code.

Upvotes: 7

gen_Eric
gen_Eric

Reputation: 227260

They are equivalent because in a jQuery plugin, this is the jQuery object, so doing $(this) does nothing.

.bind will work on all elements in a jQuery object, and when you do .each you are calling .bind on each element individually.

So, they are equivalent, because they both loop over elements and bind events to them.

I suggest using the 2nd one, it's cleaner and faster.

Upvotes: 1

Naftali
Naftali

Reputation: 146310

There is no difference at all between the two.

Just for some reason in one of them you are doing a loop, but in the end, they have the same result.

Upvotes: 1

Related Questions