Pourquoi parsente tabsshow-event triggerd par childtab?

Question

J'ai un onglet (appelé firsttab) avec dans son contenu un autre onglet (appelé childtab). Nous lions l'événement tabshow-event au premier onglet. Si nous cliquons sur l'un des onglets dans "firsttab" tout fonctionne bien (Tab 1 - Tab 5) si nous cliquons sur l'un des onglets "childtab" (Tab 1.1 - Tab 1.3) l'événement tabshow qui sont liés à "firsttab" est triggerd.

Testcase: http://jsfiddle.net/bM8Wh/

HTML:

<div id="firsttab"> 
    <ul> 
     <li><a href="#firsttab_1">Tab 1</a></li> 
     <li><a href="#firsttab_2">Tab 2</a></li> 
     <li><a href="#firsttab_3">Tab 3</a></li> 
     <li><a href="#firsttab_4">Tab 4</a></li> 
     <li><a href="#firsttab_5">Tab 5</a></li> 
    </ul> 

    <div id="firsttab_1"> 
     <div id="childtab"> 
      <ul> 
       <li><a href="#childtab_1">Tab 1.1</a></li> 
       <li><a href="#childtab_2">Tab 1.2</a></li> 
       <li><a href="#childtab_3">Tab 1.3</a></li> 
      </ul> 

      <div id="childtab_1">Tab 1.1</div>    
      <div id="childtab_2">Tab 1.2</div> 
      <div id="childtab_3">Tab 1.3</div> 
     </div> 
    </div> 
    <div id="firsttab_2">Tab 2</div> 
    <div id="firsttab_3">Tab 3</div> 
    <div id="firsttab_4">Tab 4</div> 
    <div id="firsttab_5">Tab 5</div> 
</div> 

JavaScript:

$("#firsttab, #childtab").tabs(); 
$("#firsttab").bind('tabsshow', function(event, ui) { funcX(ui.index); }); 

function funcX(idx){ 
    alert('triggerd - index: ' + idx); 
} 

Je down't understande pourquoi le tabsshow événement est triggerd par le childtab parce que je lie cet événement le premier onglet.

La réponse de ma jquery-cochée était: "bulle d'événements, vérifier la cible." mais je comprends ce qu'il veut dire.

i gérer le problème en modifier ma tabsshow-event-gestionnaire à:

$("#tabs").bind('tabsshow', 
    function(event, ui) { 
    if ((/#(.*?)$/im).exec(ui.tab.hash)[1] == this.id) 
     funcX(ui.index); 
    }); 

mais je vais comprendre où sont le problème.

Answer 1

Par défaut, event's bubble, ce qui signifie qu'un événement dans un élément enfant atteint tous les éléments parents sauf si vous l'arrêtez. Ainsi, par exemple, un clic n'importe où sur la page est un événement click sur cet élément, c'est parent, et ainsi de suite jusqu'à document. Ce comportement se produit également avec des événements personnalisés jQuery comme tabsshow, mais si vous ne voulez pas vous pouvez arrêter l'événement de barbotage à l'aide event.stopPropagation(), comme ceci:

$("#childtab").bind('tabsshow', function(event, ui) { 
    event.stopPropagation(); 
}); 

Ce arrête l'événement de tirer sur #firsttab parce qu'il ne fait plus de bulles là-bas. You can try your sample with this fix here.