Question

http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html

Based on this tutorial, I created my first plugin and made some modifications.
But, the plugin doesn’t work for dynamically generated content when I load new content on the site.

I have no idea how to go about making it live. The events are already using .on but the building of the pluggin doesn’t work.

Here is the jsFiddle: http://jsfiddle.net/bT4dH/13/

I know I could call the plugin everytime I add content dynamically, but as that gets messy very quickly, I would prefer to avoid it, and integrate it directly into the plugin.

I was starting to try this:

$(document).on('DOMNodeInserted', function (e) {
    if (e.target.classname === 'JS_postShrinker') {
         $(e.target).shrinker(options);
    }
});

But it doesn’t work

UPDATE

Please ignore the DOMNodeInserted, I was just trying it. How do people in general make plugins live? I have the same problem with:

• http://code.google.com/p/jquery-watermark/
• http://unwrongest.com/projects/elastic/
• And many more…

Answer 1

You can simply make it live by using .on() in a bit different way, with delegation. The documentation explains it in detail.

$(closeParent).on(event, selectorForElement, handler);

All you have to do is to choose a parent that you surely know will be part of the DOM when you attach the handler. In the worst case, you can choose body.

Then you attach the handler on this element, and specify the selector for the child elements (that can be inserted into the DOM at any time). The handler will run whenever the event is fired on any of the child elements matching the selector. This method makes use of event bubbling in a very clever way.

EDIT: Of course this will only work for event handling. If you need to initialize your elements when they are added to the DOM (resizing, decorating, etc.), you better call the plugin every time this happens. This is how most plugins work. The DOMNodeInserted event is not cross-browser and deprecated, like all Mutation events, so you should not use it.