Nested tabs repeatedly fire tabselect event

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>