Nested tabs repeatedly fire tabselect event

[Greg]

When a tab is nested within another tab, the tabselect event fires first on the child tab, and then erroneously on the parent tab, where nothing is changed, and the ui object passed references the child tab, rather than the parent. Example code:

<div id="mainTab">

<ul>

<li><a href="#tab1"><span>Tab1</span></a></li> <li><a href="#tab2"><span>Tab2</span></a></li>

</ul> <div id="tab1">

<div id="subTab1">

<ul>

<li><a href="#tab1_1"><span>Tab1.1</span></a></li> <li><a href="#tab1_2"><span>Tab1.2</span></a></li>

</ul> <div id="tab1_1">Tab1.1 content</div> <div id="tab1_2">Tab1.2 content</div>

</div>

</div>

<div id="tab2">Tab2 content</div>

</div>

<script type="text/javascript"> $('#mainTab').tabs(); $('#subTab1').tabs();

$('#mainTab').bind('tabsselect', function(event, ui) {

alert("Hello World main tab selecting " + ui.panel.id);

}); $('#subTab1').bind('tabsselect', function(event, ui) {

alert("Hello World sub tab selecting " + ui.panel.id);

});

</script>

[Greg]

Hello,

I have a very nice piece of code which allows me to add two attributes to a tabs content div, myXmlUri and myXslURI, such that when clicked, the xml is retrieved, and the xsl transformation is performed to provide the content of the div. It works really nicely, apart from the issue reported above, which causes the content to appear twice! Any suggestions greatly appreciated, of if there is a more appropriate way to pursue this, I would appreciate any advice!

Greg

[Scott González]

This is not a bug. Events bubble.

[Scott González]

Milestone TBD deleted