为什么选择子选项卡Show event triggerd by childtab?

我有一个标签(称为firsttab),他的内容中有另一个标签(称为childtab)。我们将tabshow事件绑定到firsttab。

如果我们单击“firsttab”中的一个选项卡,所有工作都正常(表1-表5) 如果我们单击其中一个“childtab”选项卡(tab1.1-tab1.3),那么绑定到“firsttab”的tabshow事件将被触发。

测试用例: 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);
}

我不明白为什么tabsshow事件被childtab触发,因为我将这个事件绑定到firsttab。

我的jquery的答案是:“事件泡沫;但我明白他的意思。

我通过将tabsshow事件处理程序更改为:

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

但我会明白问题出在哪里。