привязка событий с помощью .on () для диалогов JQueryUI внутри вкладок JQueryUI

Question

У меня есть страница со ссылками класса 'dialog', которые генерируются в JQueryUI dialog при нажатии.Эти диалоги создаются из других элементов, присутствующих на странице, и могут содержать ссылки класса add_tab, которые должны создавать новый JQueryUI [tab] (http://jqueryui.com/demos/dialog/) при нажатии. Эти вкладки загружают свое содержимое через Ajax и состоят из идентичных структур.Это означает, что ссылка «add_tab» в диалоговом окне создает новую вкладку, содержащую ссылки «диалогового окна», которые генерируют диалоги, содержащие дополнительные ссылки «add_tab» и т. Д.

Это базовая структура HTML:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">tab 1</a></li>
  </ul>
  <div id="tabs-1">
    <p>This tab contains a <a href="#popup1" class="dialog" target="_new">popup</a> and a direct link to a <a href="tabs2.htm" class="add_tab">new tab</a>.</p>
    <div id="popup1" style="display:nonee;">This popup contains a link to a <a href="tabs2.htm" class="add_tab" target="_new">new tab</a>.</div>
  </div>

Используя метод .on () в JQuery 1.7, у меня возникают проблемы с правильной регистрацией обработчика кликов для ссылок «add_tab», которые появляются в диалогах на добавленных вкладках.зарегистрировать обработчики кликов для ссылок «диалогов» во вновь сгенерированных вкладках (чтобы они генерировали диалог), но не удалось зарегистрировать обработчики кликов для ссылок «add_tab», которые появляются внутри этих диалогов.упрощенная тестовая версия онлайн на http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm. Возьмем, к примеру, следующий сценарий:

1. на http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm, нажмите «p»opup ': при этом в диалоговом окне будет сгенерировано диалоговое окно JQueryUI
2. , щелкните «новая вкладка»: в новой добавленной вкладке JQueryUI
3. появится новая вкладка с меткой tabs2.htmнажмите «всплывающее окно»: в этом диалоговом окне будет сгенерировано диалоговое окно JQueryUI

4. , щелкните «новая вкладка»: это НЕ создаст новую вкладку JQueryUI, а вместо этого откроет цель в новом окне

   ==> это показывает, как, по-видимому, этот обработчик событий NOT правильно зарегистрирован для ссылок 'add_tab', которые появляются внутри диалоговых окон, генерируемых во вновь добавленных вкладках

5. во вкладке с меткой tabs2.htm щелкните «новая вкладка»: это создаст новую вкладку JQueryUI

   ==> это показывает, как этот обработчик событий правильно регистрируется для ссылок «add_tab», которыепроисходят непосредственно во вновь добавленных вкладках

Это мой код JavaScript:

// these event registrations register clicks on $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs
// note: this event registration works for all such links on the original page
$('a.dialog').on('click', function(){
  $($(this).attr('href')).dialog(); 
  return false; 
});
$('a.add_tab').on('click', function(){
  $tabs.tabs( "add", $(this).attr('href'), 'added tab'); 
  $('.ui-dialog-content').each(function(){$(this).dialog('close')}) 
  return false; 
}); 
// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs 
var $tabs = $( "#tabs" ).tabs({    
  add: function(event, ui) { 
    $tabs.tabs('select', '#' + ui.panel.id); 
    $tabs.tabs($tabs.tabs('option', 'selected')) 
      .on('click', 'a.dialog', function(){ 
        $($(this).attr('href')).dialog(); 
        return false; 
      })
      // this registration doesn't seem to work for <a class="add_tab"> links occurring inside generated JQueryUI dialogs inside added JQueryUI tabs          
      .on('click', 'a.add_tab', function(){ 
        $tabs.tabs( "add", $(this).attr('href'), 'added tab'); 
        return false; 
      }); 
  }
});

Я почти там!Может ли кто-нибудь помочь мне с последним обработчиком событий в коде выше?Любая помощь очень ценится!

Answer 1

Тем временем я нашел обходной путь, который просто регистрирует обработчики событий один раз в контейнере 'tabs' и добавляет диалог к ​​контейнеру 'tabs' при создании. Таким образом, мой исходный код может быть урезан до:

// tabs: upon creation, register clicks on nested $('a.dialog') and $('a.add_tab') to open new JQueryUI dialogs / tabs 
var $tabs = $( "#tabs" ).tabs({
  create: function(event, ui) {
    $(this)
      .on('click', 'a.dialog', function(){
        // dialog: upon creation, move the dialog to the tab to ensure delegated event registration
        $($(this).attr('href')).dialog().parent('.ui-dialog').appendTo($tabs);
        return false;
      })
      .on('click', 'a.add_tab', function(){
        $tabs.tabs( "add", $(this).attr('href'), $(this).attr('href'));
        $('.ui-dialog-content').dialog('close');
        return false;
      })
  }
});

Answer 2

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

В вашем коде вы используете привязку события двумя способами, событие, если вы используете .on ():

• сначала вы делаете прямую привязку к существующим элементам a.dialog и a.add_tab - это будет работать только для ссылок на tab1, поскольку они являются единственными, существующими в то времякод выполняется, здесь делегирование событий не выполняется.

• при добавлении вкладки вы выполняете делегирование событий в контейнере вкладок $ tabs:

  • для ссылок, чтобы открыть диалог с $tabs.on('click', 'a.dialog', function(){ ... }) - это работает как ожидалось, потому что ссылка a.dialog действительно находится внутри контейнера вкладок.

  • для ссылок в диалоге с $tabs.on('click', 'a.add_tab', function(){ ... }) - это не сработает, потому что при создании диалога плагин перемещает <div id="popup2"> в конце тела (до </body>).Поэтому, когда вы щелкаете a.add_tab внутри диалогового окна, он больше не является потомком контейнера вкладок, и делегирование событий не происходит.

Вот что ябудет делать:

1. , чтобы избежать повторения одного и того же кода, объявите ваши обработчики событий как переменные

2. использовать делегирование событий в контейнере вкладок для ссылок a.dialog и a.add_tab

3. при создании нового диалога используйте делегирование событий в диалоговом окне для ссылок a.add_tab, которые он будет содержать

Вот код:

var addTabClickHandler = function(e) {
    $tabs.tabs("add", $(this).attr('href'), 'added tab');
    $('.ui-dialog-content').each(function() {
        $(this).dialog('close')
    })
    return false;
};

var dialogOpenClickHandler = function(e) {
    $($(this).attr('href'))
        .dialog()
        .on('click', 'a.add_tab', addTabClickHandler);
    return false;
}

var $tabs = $("#tabs").tabs({
    add: function(event, ui) {
        $tabs
            .tabs('select', '#' + ui.panel.id)
            .tabs($tabs.tabs('option', 'selected'));
    }
});

$tabs
    .on('click', 'a.dialog', dialogOpenClickHandler)
    .on('click', 'a.add_tab', addTabClickHandler);