Nested tabs do trigger events for outer tabs when using bind

[klaus.hartl]

Code:

<div id="container-1">
    <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">
        <div id="sub-container-1">
            <ul>
                <li><a href="#sub-tab-1"><span>sub-tab-1</span></a></li>
                <li><a href="#sub-tab-2"><span>sub-tab-2</span></a></li>
            </ul>
            <div id="sub-tab-1">...</div>
            <div id="sub-tab-2">...</div>
        </div>
    </div>
    <div id="fragment-2"></div>
</div>

$('#container-1').tabs()
    .bind("tabsselect", function (event, ui) {
        alert(ui.index);
    });
$('#sub-container-1').tabs();

Also see: ​http://groups.google.com/group/jquery-ui/browse_thread/thread/799d381149428380/7c8508cbe9ec0ea7

[klaus.hartl]

This is actually expected behavior due to event propagation. The inner "tabsselect" event bubbles up, thus it'll fire the handler when passing the outer tabs. It's required to explicitly prevent this propagation:

$('#container-1').tabs()
    .bind("tabsselect", function (event, ui) {
        alert(ui.index);
    });
$('#sub-container-1').tabs()
    .bind("tabsselect", function (event, ui) {
        event.stopPropagation();
    });