Attach multiple jQuery plugins onto a single element

According to the jQuery plugin development guides from the Internet, the common practice of developing a jQuery plugin would be:

(function($) {
    $.fn.myplugin = function(options){
        //...
        //Plugin common characteristic
        //e.g. default settings
        //...

        //Attach to each desired DOM element
        return this.each(function(){    
            //Instantiation stuff...
        });
    }

})(jQuery);

$(document).ready(function(){
    $(".someclass").myplugin();
})

It seems to me that, if the elements with class "someclass" have been attached to another plugin, once those elements are going to attach to "myplugin", they will lose the original relationship to the previously attached plugin. I'm not sure if my thinking is completely correct. Pl开发者_StackOverflow中文版ease advise if any mis-understood.

Thank you! William Choi

---

An element isn't "attached" to a plug-in. A plug-in just adds further methods to the jQuery wrapper for a matched set of elements. So just as the jQuery wrapper has parent and find, it also has the plug-in's myplugin method. These can all coexist as long as there are no naming conflicts.

It's true that if two different plug-ins both try to change something about the elements that cannot be two things at once (a plug-in that changes the foreground color to "blue" and another changing the foreground color to "red"), then they'd collide if you called both of the two plug-ins methods on the same element set. But that's just like two calls to css.

In particular, remember that there can be multiple event handlers assigned to the same event on the same element, so plug-ins that hook events need not necessarily conflict with one another (unless one of them stops the event during handling).

---

Here's an example of two plug-ins that act on the matched set of elements, but in non-conflicting ways:

plugin1.js:

(function($) {
    $.fn.foo = function() {
        this.css("background-color", "#b00");
        return this;
    };
})(jQuery);

plugin2.js:

(function($) {
    $.fn.bar = function() {
        this.css("color", "white");
        return this;
    };
})(jQuery);

Usage:

$("#target").foo();
$("#target").bar();

or even

$("#target").foo().bar();

Live example

Now, if both the foo and bar plug-ins tried to set the foreground color, the one called later would win.

---

Here's an example of a pair of plug-ins that both want to handle the click event, but do so in a cooperative way:

plugin1.js:

(function($) {
    $.fn.foo = function() {
        this.click(function() {
            $("<p>Click received by foo</p>").appendTo(document.body);
        });
        return this;
    };
})(jQuery);

plugin2.js:

(function($) {
    $.fn.bar = function() {
        this.click(function() {
            $("<p>Click received by bar</p>").appendTo(document.body);
        });
        return this;
    };
})(jQuery);

Usage:

jQuery(function($) {

    $("#target").foo().bar();

});

Live example

---

There's no magical relationship going on. There's no central registry or snap-ins that "belong" to any one element or to any one plug-in.

Javascript objects are just hacked-up functions; when you "attach a plugin" to an element, you're just calling some third-party library function that does something to that element, and possibly stores some internal data to assist with its animation throughout the session.

So there is nothing legally stopping you from "attaching" multiple plug-ins to the same element, though of course whether they'll be logically compatible is quite another question.