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

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.