Loading jQuery UI with delegate() or live()?

I'm using .load() to load other pages within my site into a div. Is there a way to add jquery ui enhancements to elements o开发者_Go百科n the newly loaded page? I was thinking about using .delegate() or .live(), but can't figure out what event to bind them to? Or is there a better way?

You can use the callback functions provided by jQuery's ajax function - for load(), the syntax would look something like:

$('#ele').load('somewhere #newEle', function(){
    $(this).find('#newEle').slider();
});

Alternatively, look at the global ajax events, like ajaxSuccess or use a plugin that extends jQuery's existing ajax functions with functionality like the one you need such as this one: http://www.protofunc.com/scripts/jquery/ajaxManager/

You want to do you jQuery UI code in the complete callback. See the API. For example:

$('#myDiv').load('/some/page.html', function() {
    // jQuery UI hotness here
});

You should use delegate to bind the events to the div you are loading content to, so if your div has an id of somediv then you would bind them like so...

$('#somediv').delegate('a', 'click', function() {

})
.delegate('input', 'focusin', function() {

})
.delegate('li', 'click', function() {

});

These are obviously just made up examples... but you can chain your handlers like this and bind them to your content loading div.

Enjoy :)