JQueryUIタブ内のJQueryUIダイアログの.on（）とのイベントバインド

Question

JQueryUIで生成するクラス 'ダイアログ'のリンクを持つページがあります。dialogをクリックします。これらのダイアログは、ページにある他の要素から作成され、クリックされたときに新しいJQueryUI [タブ]（http://jqueryui.com/demos/dialog/）を作成するクラス 'add_tab'のリンクを含むことができます。これらのタブは、Ajax経由でコンテンツをロードし、同じ構造で構成されています。これは、ダイアログの 'add_tab'リンクが新しいタブを作成し、さらに 'add_tab'リンクを含むダイアログを生成する 'dialog'リンクを含むことを意味します。 jQueryの1.7の.on() methodは、私が正しく追加タブのダイアログに表示される「add_tab」リンクのクリックハンドラを登録してトラブルを持って使用し

<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> 

：

これは、基本的なHTML構造です。私は、ダイアログボックスを生成するために、新たに生成されたタブの 'ダイアログ'リンクのクリックハンドラを登録することができますが、内のダイアログに表示される 'add_tab'リンクのクリックハンドラを登録できません。私は簡単なテストバージョンをhttp://www.kantl.be/ctb/temp/jquerytest/tabs1.htmにオンラインで入れました。 http://www.kantl.be/ctb/temp/jquerytest/tabs1.htm上

1. を、「ポップアップ」をクリックしてください：シナリオ以下の例のために、取るこれは「新しいタブ」をクリックし、ダイアログでJQueryUIダイアログ
2. を生成します。これは
3. 新しいJQueryUIタブを生成します。 'tabs2.htm'と表示された新しく追加されたタブで 'popup'をクリックしてください：これはJQueryUIダイアログを生成します

4. ダイアログで 'new tab'をクリックします：新しいJQueryUIタブは生成されません新しいウィンドウでの目標

   = =>これは、このイベントハンドラが明らかに「tabs2.htm」ラベル]タブで、新しく追加されたタブ

5. で生成された内部ダイアログを発生する「add_tab」リンクについて正しく登録ではありません方法を示して「新しいタブをクリックします「これは新しいJQueryUIタブを生成します

   ==>これは、このイベントハンドラが正しく登録されている様子を示して 『新しく追加されたタブ

これは私のjavascriptのコードである内部で直接発生add_tab』リンク：

// 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

イベントデリゲーションのアイデアは、親の（ダイナミックに作成されていない）で固定されたイベントをバインドすることです。 .on（）メソッドのselectorパラメーターを使用すると、イベントハンドラーを起動する要素を指定することができます。あなたのコードで

あなたは二つの方法で結合イベント、イベントを使用しています）（.onを使用する場合：

• は、最初のあなたが直接a.dialog既存の要素上の結合とa.add_tabを行う - このtab1上のリンクに対してのみ機能します。これは、コードが実行された時点で存在する唯一のものであり、ここでのイベントの委任はありません。

タブを追加するとき、あなたは、タブコンテナ$タブ上のイベントの委任を行っている

• ：$tabs.on('click', 'a.dialog', function(){ ... })でダイアログを開き、リンクについて

  • - リンクa.dialogがあるため、期待通り、この作品実際にはタブコンテナ内にあります。 $tabs.on('click', 'a.add_tab', function(){ ... })と、ダイアログ内のリンクのための

  • - ダイアログが作成されたときに、プラグインは（</body>前）本文の最後に<div id="popup2">を移動するため、これは動作しません。したがって、ダイアログ内のa.add_tabをクリックすると、タブコンテナの子孫ではなくなり、イベントの委任も発生しません。リンクのタブコンテナの変数

  • 使用イベントの代表団として、あなたのイベントハンドラを宣言し、

    1. を同じコードの繰り返しを避けるために：

は、ここで私はどうなるのかですa.dialogとa.add_tab

新しいダイアログを作成するときは、event delそれはここで

が含まれていますa.add_tabリンク用のダイアログ上のegationコードです：

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); 

Answer 2

。一方、私はちょうどに一度のイベントハンドラを登録し、回避策を作ってみました "タブのコンテナを作成し、作成時にダイアログを 'タブ'コンテナに追加します。私の初期のコードは次のようにトリミングすることができます：

// 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; 
     }) 
    } 
});