How to Apply jQuery to Elements Not Available at Document.Ready?

Question

The website I am developing uses jQuery UI tabs to load content via AJAX (in this case, each tab is made up of a partial page). This works well, and I am happy with those results. However, one problem I have repeatedly come across is that when I include jQuery within my master.js file (which I use for site-wide Javascript), it DOES NOT apply to anything that is loaded in via AJAX. For example, I tried something simple like:

// Theme all the buttons with jQuery UI themes.
$('input:button').button();

However, all the buttons on the tabs are not themed appropriately.

How do I fix this? I was thinking something with jQuery's .live() function, but both the 'load' and the 'ready' events don't appear to be working. This has become a pretty frustrating problem so any help that can be provided would be most appreciated.

Answer 1

Well, the livequery plugin ( http://docs.jquery.com/Plugins/livequery ) used to be used for a lot of stuff like this. It's not the most efficient way to handle the problem, though.

If you're adding content via AJAX, why not just re-assign handlers for the content after you add it?

// setup simple jQuery plugin to handle all of your custom logic (although this could be a normal function as well)
$.fn.assignMyHandlers = function(){
    return this.each(function(){
        $(this).find('input:button').button();
        // etc
    });
};

// and then everywhere that you bring in AJAX'd content...
$.get('test.html', function( html ) {
    var $fragment = $( html );
    $fragment.assignMyHandlers();
    $fragment.appendTo( "#theList" );
});

Answer 2

You can apply it to those new elements in your AJAX callback:

$.ajax({
    url:'/some/path',
    success: function( resp ) {
        var $newElements = $(resp);  //create jQuery object of new elements
        $newElements.find('input:button').button();  // call .button() on inputs
        $newElements.appendTo('body');  // append to wherever
    }
});

I have no idea what is happening in your AJAX callback, but this should give you the general idea.