jQuery: How to call a jQuery plugin function on an element that hasn't yet been added to the DOM?

I have a jQuery plugin that I am using:

$(document).ready(function(){
    $('.elements').fancyPlugin();
});

This works great until I start adding new elements:

$.get('ajax.html', function(data){
    $('#container').html(data);
});

I could call the plugin function again like this:

$.get('ajax.html', function(data){
    $('#container').html(data).find('.elements').fancyPlugin();
});

...except that the AJAX is happening inside another jQuery plugin that shouldn't have to know about the 开发者_如何学编程fancyPlugin().

How can I apply this plugin to all current and future elements?

I think this will work in all browsers except IE:

document.body.addEventListener("DOMNodeInserted", function(event){
    var $elementJustAdded = $(event.target);
    if ($elementJustAdded.hasClass('elements')) {
        $elementJustAdded.fancyPlugin();
    }
}, false);

Another way of doing this is creating your own event :

var container=$('#container');
$.get('ajax.html', function(data){   
   container.html(data);
   $('.elements',container).trigger('added.yourns');    
});

container.on('added.yourns','.elements',function(){
  $(this).fancyPlugin();
});

Then, when adding ellements, simply trigger the event with the trigger method!

var aDiv=$('div');
aDiv.appendTo(someNode);
aDiv.trigger('added.yourns');

Doing so will enable you to attach any behaviour in any javascript file !

If those elements are added with AJAX you could use the .ajaxSuccess() method:

$('#container').ajaxSuccess(function(result) {
    $('.elements').fancyPlugin();
});

And here's a live demo.

Have your AJAX handler trigger some custom event like contentAdded, and bind fancyPlugin to that event.

Alternatively, you can use DOM mutation events to call fancyPlugin for any change in the container. Native browser support isn't quite there yet, but there are plugins which should take care of that.

Interesting. Essentially, you'd like something like:

$('selector').ready( ... do something ... );

The problem is that kind of logic isn't available. Elements loading on the page don't trigger any specific events I'm aware of, they just inherit CSS from the DOM nodes above them. What I would do is just, from the $.get success function, trigger a custom event. The rest of your code can hook into that event to do any plugin reloading work that may be needed. You can pass a list of relevant selectors with the event, and use that to invoke the appropriate plugins (you can keep a set of selector -> plugin refresh function relationships in a hashtable)

Have you looked at the jQuery .live event handler? It automatically binds when a new item is added to the dom if it meets the specified requirements.

http://api.jquery.com/live/

What if you make something like this?

$(document).ready(function(){
    $('.elements').live('load', function () {
        $(this).fancyPlugin();
    })
});

The events are not re-binded after ajax calls or within the content they return. live() attaches a handler to the event now and in the future."