Примените виджеты jQuery UI к элементам, загруженным в ajax

Question

Я хочу активировать виджет кнопки jQueryUI для данного селектора, скажем, «.button».

Какой лучший способ автоматически активировать виджет для любых новых элементов .button, вставленных в DOM после начальной загрузки страницы через ajax.

Ранее я использовал livePlugin с кодом, похожим на этот:

$('.button')
    .live(function(){
        $(this).button();
    })

Поскольку функция live была перемещена в ядро ​​jQuery, для функции live в качестве первого параметра требуется тип события, так что это больше невозможно. Есть ли альтернативный метод в ядре jQuery, который достиг бы этого?

Answer 1

У вас есть несколько вариантов здесь. Во-первых, есть плагин liveQuery , например:

$(.button).liveQuery(function() { $(this).button(); });

Другой альтернативой является вызов селектора для ваших элементов при загрузке, например, он находит все .button только в ответе, поэтому не связывается с существующими элементами до вызова ajax:

$.ajax({
   url: 'page.html'
   success: function(data) {
     //stuff...
     $('.button', data).button();
   }
});

Еще один похожий подход, если у вас много чего происходит, - это использовать ваши плагины в такой функции:

function rigUI(context) {
  $('.button', context).button();
  $('.date', context).datepicker();
}

$(rigUI); // Load at document.ready, default context is document

//in ajax load love above call: rigUI(data);

Answer 2

Альтернатива liveQuery, поскольку она казалась мне устаревшей, поскольку я не мог заставить ее работать:

https://github.com/bapplistudio/jquery.build

• Вам нужно объявить все ваши активации jquery в * $ ("body"). Build (function () {}); * заявления
• Вам нужно вызвать $ ("newelement"). Build (); чтобы отозвать все ваши функции инициализации.

Посмотрите документацию на сайте jquery.build для получения дополнительной информации и примеров, а также живую демонстрацию, похожую на ваш случай.

http://saf.re/github/jquery.build/examples/simple.html

Answer 3

Поскольку все команды jquery имеют единую структуру, любой объект (включая данные json из запроса ajax) действительно легко использовать в качестве команды jquery

Пример:

var jc = {
    'selector': '#sample',
    'method': 'dialog',
    'options': {'title': 'I am a sample'}
}

$(jc.selector)[jc.method](jc.options);

совпадает с

$ ('# sample'). Dialog ({'title': "Я - образец}};

http://jsfiddle.net/wb5Ee/