Adding jQueryui Buttons to dynamically added content

Question

I have a list of items that have some jQueryUI buttons associated with them. After an action (deleting an item) I want to reload the list via ajax.

Only problem is when I do so the JQueryUI buttons no longer show, just the standard markup.

I know I can use jQuery.live() for dynamically adding click handlers etc, but how do I apply a jQueryUI button() to them?

Answer 1

You can re-bind the event handler with:

$("#mybutton").unbind().click(function(){ ..do..something... });

Answer 2

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.