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()

<div id="mydiv"></div>

Normally I do .live() with a click event, but I need to know how to tell the dom that this new div has loaded without any explicit actions/events from the user.

This code doesn't work, but I want to do something like this:

mydiv = $("#mydiv");

mydiv.live("mydiv.length > 0", function() {
       // do something
});

The "mydiv.length" being a substitue for the typical "click" or other event.

Answer 1

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);