jQuery - проблема с кнопками в контенте, загруженном из ajax

Question

Я использую кнопки из jQuery UI следующим образом:

("button").button();

Simple ..

Но когда я использую тег в файле, загруженном ajax, сценарий кнопки не применяется к кнопке.

Например: file.php:

<button>Testbutton</button>

Когда этот файл загружается на страницу с помощью («кнопка»). Button (); как это:

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

.. кнопка не применяется сценарий jQuery UI.

Я посмотрел на "живую" функцию jQuery, но, похоже, она не работает для меня: (

Answer 1

.live() не работает, потому что он обрабатывает только события пользовательского интерфейса (click, dblclick, mousedown и т. Д.).Вам необходимо предоставить обратный вызов на .load():

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

Answer 2

Вы должны инициировать свою кнопку в функции обратного вызова:

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

При желании вы можете использовать ajaxSuccess:

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

Это будет запускать все ваши кнопки внутри вашего div каждый раз, когда на ваш div успешно вызывается загрузка. Подробнее см. http://api.jquery.com/ajaxSuccess/.

Answer 3

Обратите внимание, что на вызываемой странице Ajax должен быть импортирован CSS-файл JQuery UI

Answer 4

Попробуйте вызвать функцию .button в обратном вызове AJAX-запроса, чтобы он выполнялся для нового содержимого, помещенного в DOM.

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