jquery .live on load event

Question

I need a way to use the jquery .live() function to act on elements that are loaded via ajax.

For instance a div is loaded via ajax .load()<

Answer 1

.live does not work with ready end load event as stated in jquery 1.3 documentation you cannot use load and ready event with live visit http://api.jquery.com/live/ for more information,

Answer 2

Yap, it is still little expensive. But you can try this:

$(document).ready(function(){
    $(document).bind('DOMSubtreeModified', function() {
       if($("#mydiv").length > 0){
         //Here goes your code after div load
       }
    });
});

Answer 3

Another way to do this would be to use trigger() to trigger your own custom event (let's call it content_loaded). load() takes a callback function it calls on completion:

function callback_function(responseText, textStatus, XMLHttpRequest) {
    //if we have valid data ...
    trigger("content_loaded");
}

$("your_selector").load("your_url", callback_function);

And then just set up an event listener and run it whenever your event is fired.

$("your_selector").bind("content_loaded", your_results_loaded_function);