jQueryUI tabs () не работает, если страница, содержащая его, была загружена AJAX (фактически, PJAX) - PullRequest
Новая
       12

jQueryUI tabs () не работает, если страница, содержащая его, была загружена AJAX (фактически, PJAX)

0 голосов
/ 03 марта 2012

Мой вопрос о том, как jQuery находит различные узлы DOM, которые не существуют, пока они не загружены AJAX.

Моя конкретная проблема заключается в том, что мой скрипт jQueryUI tabs () работает только в том случае, если он включен вместе с div вкладок во фрагменте страницы, загруженном AJAX. Этот сценарий не работает, если он был загружен как часть исходной главной страницы шаблона до того, как существует тег tab (то есть до загрузки ajax).

Чтобы объяснить, что я имею в виду, приведем простое описание кода: 

 $('a.ajax').live('click', function(){
   $.ajax({ url: '/get_page_with_tabs', 
         success: function(data){ 
         $('div#ajax').append(data); // the content that gets replaced
         } 
   });
});

 $('div#tabs').tabs(); 
 // this script must be part of the "data" along with the <div id="tabs></div>
 // it can't be loaded along with the main template page which contains: <div id="ajax">    </div> and the $.ajax script

Еще одно замечание: на самом деле я использую PJAX , но это выглядит функционально идентично jQuery AJAX в отношении асинхронной загрузки div.

Ответы [ 2 ]

1 голос
/ 03 марта 2012

Если вы загружаете вкладки с помощью ajax, вам необходимо инициализировать их после завершения ajax.Если вы попытаетесь инициализировать с помощью события ready, то при загрузке страницы html-вкладка не будет существовать.

Если вы замените все html-вкладки, та же история

1 голос
/ 03 марта 2012

how jQuery finds various DOM nodes that don't exist until they are loaded by AJAX

Не находит.

Переместите код инициализации вкладок в обработчик ответов AJAX: 

$('a.ajax').live('click', function(){
   $.ajax({ url: '/get_page_with_tabs', 
         success: function(data){ 
         $('div#ajax').append(data); // the content that gets replaced
         $('div#tabs').tabs(); 
         } 
   });
});

Используя live и on, вы можете прикреплять обработчики событий к элементам, которые еще не существуют на странице (и могут быть добавлены позже с помощью вызова ajax или функции append).

jQuery может перехватывать эти события из-за "пузырящего" события - в основном, родительский элемент верхнего / верхнего уровня ловит дочернее событие ...

...