Использование delegate() или live() с вкладками пользовательского интерфейса jQuery

Я перерисовываю часть страницы, которая включает вкладки jQuery-ui. После повторного рендеринга заголовки вкладок больше не привязаны к событию.

Можете ли вы сначала инициализировать вкладки с помощью delegate() или live() и избежать этой проблемы, или после этого необходимо повторно привязать $('foo').tabs()?


delegates jquery live jquery-ui jquery-ui-tabs
person Ian    schedule 20.07.2011    source источник
comment
Вы хотите использовать delegate только вкладку events, или вы имеете в виду повторную инициализацию всего виджета?   -  person Andrew Whitaker    schedule 20.07.2011
comment
Часть страницы, которая перерисовывается, содержит (среди прочего) структуру вкладок. При повторном рендеринге вкладки больше не инициализируются (классы вкладок jquery-ui не применяются). Я использую делегат для поддержки событий щелчка после повторного рендеринга, как мне сделать то же самое с такими функциями, как $('foo').tabs() ?   -  person Ian    schedule 21.07.2011

Ответы (3)


arrow_upward
1
arrow_downward

Короткий ответ: да, вы должны снова вызвать $("foo").tabs() после добавления содержимого, которое вы хотите табулировать.

Однако существует очень хороший плагин под названием livequery, который действительно выполняет что вам нужно. С помощью этого плагина вы можете написать такой код:

$(document).ready(function() {
    // When a new element with class "tabs" underneath the body element appears, apply the 
    // .tabs() function:

    $("body .tabs").livequery(function() {
        $(this).tabs();
    });
});

Пример: http://jsfiddle.net/andrewwhitaker/vpnJt/

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

person Andrew Whitaker    schedule 21.07.2011
comment
Хотя это не решило мою конкретную проблему, вызов $('foo').tabs() после повторной визуализации работал для других областей сайта, где вся структура вкладок была перерисована. Я не полностью понял свою проблему, когда пытался сформулировать ее, я перерисовывал фоновую вкладку и заголовок вкладки, а не всю структуру вкладки. Я решил свою проблему и разместил ее ниже в качестве ответа, но это самый правильный ответ на мой первоначальный вопрос. - person Ian; 05.08.2011

arrow_upward
0
arrow_downward

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

<div id="container">
  <div id="tabs"><!-- tabs to be reloaded --></div>
</div>

Предполагая, что #container не нужно перезагружать, вы можете сделать:

$('#container').delegate('#tabs', 'tabsshow', function(event, ui) {
  // some action when tabs has been shown
}
person William Niu    schedule 21.07.2011

arrow_upward
0
arrow_downward

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

Это нарушило структуру вкладок, и не было возможности повторно применить прослушиватель событий. Единственным решением jquery ui было уничтожить и перестроить вкладки, что было неприемлемо в нашей ситуации.

Я решил проблему, просто повторно отрисовав внутри фоновой вкладки и вызвав функцию oncomplete, которая увеличила счетчик в заголовке вкладки.

person Ian    schedule 05.08.2011