Opened 11 years ago

Closed 11 years ago

#4110 closed bug (notabug)

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 (last modified by 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

Change History (3)

comment:1 Changed 11 years ago by klaus.hartl

Milestone: TBD1.6

comment:2 Changed 11 years ago by klaus.hartl

Description: modified (diff)

comment:3 Changed 11 years ago by klaus.hartl

Resolution: invalid
Status: newclosed

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();
    });
Note: See TracTickets for help on using tickets.