Calling jquery methods on dynamically added elements

We can make all elements of class 'button' as JQuery UI Buttons using the following

$('.button').button();

But what if we also wanted any 开发者_如何学编程future elements added to also be UI Buttons.

How can we achieve that?

I'm afraid you'll have to explicitly call the method after the element is added.

e.g If you are adding a button to the div with id xyz then

$("#xyz").append(" <button>").button();

I'm still searching for a better solution , and would post if I find one

If you are adding them at a well-defined spot, then you can just do something like:

var newButton = $("<input>", { type: "button" });
$("body").append(newButton);
newButton.button();

Or you can use the LiveQuery plugin (as suggested by JohnP) and listen for DOM addition events:

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

You should be able to use livequery to reinitialize your plugin calls : http://brandonaaron.net/code/livequery/docs

What you might want to use is the delegate method. You can find more about it here: http://api.jquery.com/delegate/

$('yourSelector').yourHandler();

becomes

$('yourSelector').delegate('yourHandler');