Hi:
I met a problem about event handling with nested tabs. Here is the
simplified source code.
<div id='container'>
<ul>
<li><a href='#sub-container-1'><span>subcontainer</span></a></
li>
<li><a href='#tab-2'><span>tab2</span></a></li>
</ul>
<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'>sub-tab-1</div>
<div id='sub-tab-2'>sub-tab-2</div>
</div>
<div id='tab-2'>...</div>
</div>
And I bind "tabsselect" event to the outter container like this:
$('#container').bind("tabsselect", function (event, ui) {
if (ui.index == 1) alert("I'm tab-2");
});
There's no doubt that the alert will popup when I select the "tab-2",
but the annoying thing is that when the "sub-container-1" is active
and I select "sub-tab-2", the alert is still triggered which is out of
my expectation.
It seems the outter container captures the inner "tabsselect" event,
any suggestions about this? Thanks.
Cheer
Frank Yao
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
