Question

I’m in the process of converting my web app to a fully AJAX architecture.

I have my master page that is initially loaded and a div container that is loaded with dynamic content.

I created a few jQuery plugins that I apply to certain elements in order to extend their functionality. I’d normally call the functions as follows during each page load:

$(document).ready(function () {

    // Enable fancy AJAX search
    $(".entity-search-table").EntitySearch();

});

This would find the appropriate div(s) and call the plugin to enable the necessary functionality.

In an AJAX environment I can’t just apply the plugin during the page load since elements will be added and removed dynamically.

I’d like to do something like this:

$(document).ready(function () {

    // Enable fancy AJAX search
    $(".entity-search-table").live("load", function () {
        $(this).EntitySearch();
    });

});

Question: Is there any way that I can trigger an event when a <div> or other element that matches a selector is added to the DOM?

It seems incredibly wasteful to activate the plug-in every time an AJAX request completes. The plug-in only needs to be applied to the element once when it is first added to the DOM.

Thanks for any help!

Answer 1

Yes – take a look at liveQuery. Example:

$('.entity-search-table').livequery(function(){ 
    $(this).EntitySearch(); 
});