Apply jQuery UI widgets to ajax loaded elements

Question

I want to activate the jQueryUI button widget on a given selector, lets say \'.button\'.

Whats the best way to automatically activate the widget on any new \'.button

Answer 1

You have a few options here. First, there's the liveQuery plugin, like this:

$(.button).liveQuery(function() { $(this).button(); });

Another alternative is to call the selector on your elements when you load them, this for example finds all .button only in the response, so doesn't mess with existing elements before the ajax call:

$.ajax({
   url: 'page.html'
   success: function(data) {
     //stuff...
     $('.button', data).button();
   }
});

Another similar approach if you have a lot going on is to have your plugins in a function like this:

function rigUI(context) {
  $('.button', context).button();
  $('.date', context).datepicker();
}

$(rigUI); // Load at document.ready, default context is document

//in ajax load love above call: rigUI(data);