Добавление кнопок jQueryui для динамически добавленного контента

У меня есть список элементов, у которых есть некоторые связанные с ними кнопки jQueryUI. После действия (удаление элемента) я хочу перезагрузить список через ajax.

Единственная проблема - когда я делаю это, кнопки JQueryUI больше не отображаются, просто стандартная разметка.

Я знаю, что могу использовать jQuery.live() для динамического добавления обработчиков кликов и т.д., но как применить к ним jQueryUI button()?

Ответы

Ответ 1

При перезагрузке через ajax вызовите .button() (или любой другой вариант, который вы используете) в этом context, например:

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

Это будет выполняться .button() на элементах только в ответе (а не на других уже на странице /DOM в другом месте) с помощью class="button".

Вы не можете использовать .live() или что-то в этом роде, которое основано на пузырьках событий, а не на самом деле ничего общего с добавлением/удаление элементов... когда дело доходит до плагинов, вам нужно будет выполнить их снова против новых добавляемых вами элементов. Или менее эффективным, но более общим подходом будет .livequery() плагин, который используется следующим образом:

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

Как я уже сказал, это не самая эффективная вещь в мире, поскольку она фактически контролирует DOM для изменений различными способами.

Ответ 2

Вы можете повторно связать обработчик событий с помощью:

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