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

Question

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

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

Answer 1

Короткий ответ - да, вы должны снова позвонить $("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.

Answer 2

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

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

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

Answer 3

Вы должны иметь возможность прикреплять события вкладок к родительскому элементу вкладок, который не нужно перезагружать. Чтобы быть в безопасности, вы всегда можете использовать 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
}