jQuery - problem with buttons in content loaded from ajax

Im using the buttons from jQuery UI like this:

("button").button();

Simple..

But when i use the tag in a file loaded by ajax, the button script is not applied the button.

Ex: file.php:

<button>Testbutton</button>

When the this file is loaded on a page with ("button").button(); like this:

$("#updateDiv").load(file.php);

.. the button is not applied 开发者_开发问答the jQuery UI script.

I've taken a look at the jQuery "live"-function, but it doesnt seem to work for me :(

.live() doesn't work because it only handles UI events (click, dblclick, mousedown, etc.). You need to supply a callback to .load():

$("#updateDiv").load('file.php', function (){
    $(this).find('button').button();
});

You have to init your button in the callback function:

$("#updateDiv").load('file.php', function() { $('button').button(); });

Optionally you can use ajaxSuccess:

$('#updateDiv').ajaxSuccess(function() {
  $('button', this).button();
});

This will init all your buttons inside your div every time a load is successfuly called on your div. See http://api.jquery.com/ajaxSuccess/ for details.

Try calling the .button function in the callback of the AJAX request so that it is run on the new content placed in the DOM.

$("#updateDiv").load('file.php', function() {  
    $("button").button();
});

Note that the called Ajax page has to have the JQuery UI CSS file imported