Почему jQuery не обнаруживает динамически загружаемые кнопки jQuery Mobile?

Question

Я загрузил следующий HTML-код через Ajax на веб-страницу, основанную на jQuery Mobile.Важным является имя класса onButton, прикрепленное к тегу привязки.

<a class="onButton ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-role="button" data-inline="true" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Turn On</span></span></a>

После загрузки через Ajax я запустил «событие создания», чтобы применить стили кнопок jQuery Mobile согласно документации.

$.ajax({
    url: '/loadAllButtons',
    context: $('contentBox'),
    cache: false,
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
    success: function(data) {
        $(this).html(data).trigger( "create" );
    }
});

Я вижу, что кнопки были успешно загружены.Однако когда я вызываю console.log($('.onButton').length);, на консоли отображается 0.

Это интересно, поскольку Chrome Web Developer отмечает 5 экземпляров <a> тегов с классом onButton, загруженным через Ajax.

Почему jQuery не обнаруживает вновь загруженные теги привязки (или кнопки)?

---

Чтобы понять, вот как я отлаживаю:

$.ajax({
    url: '/loadAllButtons',
    context: $('contentBox'),
    cache: false,
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
    success: function(data) {
        $(this).html(data).trigger( "create" );
    }
});
console.log($('.onButton').length);

Спасибо.

Answer 1

Вы должны поместить вашу отладку console.log() в обратный вызов для вызова AJAX.Таким образом, console.log() запускается сразу после отправки запроса (поскольку по умолчанию запросы AJAX являются асинхронными), что происходит до получения ответа от сервера и, следовательно, до добавления каких-либо элементов в DOM.

Попробуйте это:

$.ajax({
    url: '/loadAllButtons',
    context: $('contentBox'),
    cache: false,
    data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
    success: function(data) {
        $(this).html(data).trigger( "create" );
        console.log($('.onButton').length);
    }
});

Кроме того, поскольку вы добавляете элементы DOM в DOM, к которым уже применены классы / структура jQuery Mobile, вам может потребоваться вызвать .button('refresh'), чтобы обновитьэлементы вместо .trigger('create') для их инициализации.Раньше я не использовал .button('refresh'), поэтому я не уверен, что вы можете вызывать его на элементе-предке кнопок или вам нужно вызывать его на самих кнопках, например:

$(this).html(data).find('.onButton').button( "refresh" );