Hi
Try adding event.stopPropagation(); to stop the event bubbling.

On Feb 10, 3:04 pm, "frank.yao.zeal" <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to