Adding jQueryui Buttons to dynamically added content

When you reload via ajax, call .button() (or whatever variant you’re using) in that context, like this:

$.ajax({
  //other options..
  success: function(data) {
    //insert elements
    $(".button", data).button();
  }
});

This will run .button() on elements only in the response (not the others already in the page/DOM elsewhere) with class="button".

You can’t really use .live() or anything like that here, that relies on event bubbling, not really anything to do with adding/removing elements…when it comes to plugins you need need to execute them again against the new elements you add. Or, the less efficient but more generic approach would be the .livequery() plugin, used like this:

$(".button").livequery(function() {
  $(this).button();
});

As I said though, it’s not the most efficient thing in the world, since it actually monitors the DOM for changes in various ways.

Leave a Comment