#4110 closed bug (notabug)

Opened February 10, 2009 09:51PM UTC

Closed February 17, 2009 10:14PM UTC

Nested tabs do trigger events for outer tabs when using bind

Reported by: klaus.hartl Owned by: klaus.hartl
Priority: major Milestone: 1.7
Component: ui.tabs Version: 1.6rc6
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (3)

Changed February 10, 2009 10:01PM UTC by klaus.hartl comment:1

milestone: TBD → 1.6

Changed February 11, 2009 10:07AM UTC by klaus.hartl comment:2

description: 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(); \ }}} → 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

Changed February 17, 2009 10:14PM UTC by klaus.hartl comment:3

resolution: → invalid
status: new → closed

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