How can you if check a jQuery plugin is already bound to a DOM node?

jquery, jquery-plugins

Solution

Unless the plugin itself defined some way of altering the element(s) it's working on, it's not possible. For example:

$.fn.extend({
  foo: function() { console.log("I am foo!"); }
});

$('#bar').foo();

Here I defined a complete (well, more-o-less) jQuery plugin which doesn't even try to interact with its calling element. Still, you can use it as you wish, on any jQuery-wrapped collection of elements, as any jQuery-wrapped collection of elements has this method in its prototype because of this line (from `jquery.js`):

jQuery.fn = jQuery.prototype = { ... }

... after `$.fn.extend` was called to plug in that plugin, no pun intended.

But even if my plugin were required to change its calling element in some way, like this:

$.fn.extend({
  bar: function() { this.html('I am all bar now!'); }
});
$('#bar').bar();

... I would still need to, basically, handle this with some external events (DOM Mutation ones), and not just depend on some internal jQuery logging.

Problem

Most jQuery plugins are tied/bound to a DOM node when you first initialize them. ``` $('#foo').bar({options: ...}); ``` How can you check to see what plugins or objects are currently bound to a DOM node like `#foo`? ``` if($('#foo').bar) if($.inArray('bar', $('#foo').eq(0))) if($('#foo').eq(0).indexOf('bar')) if($('#foo').hasOwnProperty('bar')) ``` For example, it's possible to get the events bound to an object like this ``` console.log($('#foo').data('events')); ```

Original source