Load event for Ajax tab can fire for the wrong tab

The load event for a tab should fire once the ajax tab has been loaded.

Except I have noticed that there is a bug in the 1.8 series which can cause it to fire not for the tab that was loaded - but for the previous tab in the list.

Attached is an example which shows the problem.

The main bit to look for is how the tabs are setup:

<div class="tabs" id="mytabs">
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item"><a href="#mytab1"><span>MyTab1</span></a></li>
        <li class="ui-tabs-nav-item"><a href="/test.htm"><span>MyTab2</span></a></li>
        <li class="ui-tabs-nav-item"><a href="#mytab3"><span>MyTab3</span></a></li>
    </ul>

    <div id="mytab3"><h1>MyTab3</h1></div>
    <div id="mytab1"><h1>MyTab1</h1></div>
</div>

If you click "!MyTab2", the alert should say "loaded: ui-tabs-1"

Instead it says "loaded: mytab1"

The bug is triggered by placing the panel for #mytab3 before #mytab1.

There seems to be an assumption that the ordering of the tab panels will be the same as the tab links.

But that is not a fair assumption. There are genuine reasons why they may not match.

I never had this bug in 1.7.x, so I assume some change in either jQuery UI 1.8.x or jQuery 1.4.x is causing this.

Let me know what you think.

Regards,

-asgeo1