3

jqueryui ウィジェットのtabsを使用しています。タブ内にタブがネストされている状況にあります。親タブ ウィジェット (#tabs) からのイベントのみを処理したいが、ネストされた子 (#tabs2) は無視したい。これは可能ですか？

jsFiddle の例

HTML:

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
  </ul>
  <div id="fragment-1">
    1st
    <div id="tabs2">
      <ul>
        <li><a href="#fragment2-1"><span>One</span></a></li>
        <li><a href="#fragment2-2"><span>Two</span></a></li>
      </ul>
      <div id="fragment2-1">
        1st
      </div>
      <div id="fragment2-2">
        2nd
      </div>
    </div>
  </div>
  <div id="fragment-2">
    2nd
  </div>
</div>

<div id="debug"></div>

JS:

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {

    // This code will execute whether the event came from #tabs or #tabs2

    $("#debug").text("Activated tab " + ui.newPanel.selector);
} );

出力：

ここに画像の説明を入力

4

1 に答える 1

2

子要素が同じイベントを発生させるため、子からのイベントをフィルタリングする必要があります。
次の方法で実行できます。

$("#tabs" ).on("tabsactivate", function( event, ui ) {
    if(this !== event.target)
    {
        return false;
    }
    $("#debug").text("Activated tab " + ui.newPanel.selector);
});

これはフィドルのサンプルです http://jsfiddle.net/nQsDK/4/

于 2013-04-30T14:59:40.840 に答える