jquery load inside a jquery ui tab only sometimes or when I select a new tab
<p>I have a jquery ui tabs with four tabs, each tab displays a table with some data and all the table are more or less the same.
Inside the tab before the table I have two link to change the table order.
All run fine and I can change the order if:
- I select a tab for the first time after page refresh
- I select the tab 4, then the tab 3 then the tab 2</p>

<p>after this only tab 2 run always correctly
tab 3 and 4 don't change
but if I select a different tab I see the content loaded and then the new tab</p>

<p>this is the js code for tabs and sorting:</p>

<pre><code>$(function() {
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
                ui.panel.html("Error");
            });
        }
    });
    $( "#tabs" ).tabs("option", "active", 0);
    $("div.ui-tabs-panel").delegate("#sorter a.sort", "click", function(event){
        event.stopPropagation();
        event.preventDefault();
    var e = $(this), d = $("#sorter").parent("div");
        d.load(e.attr("href"));
        return false;
    });
});
</code></pre>

<p>and the tab content loaded:</p>

<pre><code>&lt;div id="sorter"&gt;
    &lt;a class="sort" href="/it/private/ajax/proposals/region/latest"&gt;latest&lt;/a&gt;
    &lt;a class="sort on" href="/it/private/ajax/proposals/region/voted"&gt;voted&lt;/a&gt;
&lt;/div&gt;
&lt;table class="zebra"&gt;
&lt;tr&gt;&lt;td&gt;....&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>thank you
Paolo</p>
