jquery ui tabs activate event not firing

Question

All,

I am having trouble getting a handler to run when a new JQuery tab pane is shown. I am using JQuery 1.6.3 and JQuery-ui 1.8.16. My HTML looks like this:

<div class="tabs">
    <ul>
        <li>
            <a href="#one">one</a>
        </li>
        <li>
            <a href="#two">two</a>
        </li>
    </ul>
    <div id="one">one</div>
    <div id="two">two</div>
</div>

My JavaScript looks like this:

    $(".tabs").tabs({
        select  : function(event,ui) {
            alert("selected a tab");
        },
        activate : function(event,ui) {
            alert("activated a tab");
        }
    });

When I click on a tab, the select event fires (I see the alert box) but the activate event doesn't fire (I don't see the alert box). I don't understand what's wrong.

My goal is to run some code on the various widgets that appear within each tab pane when they are opened. I would be fine with associating that code with the select event, but that event fires before the widgets complete rendering.

How can I run code after the widgets in the tab pane have all been rendered?

Thanks.

Answer 1

JQueryui 1.8 only supports select event for tabs. here is the link

starting from JQueryui 1.9 and above removed select event. instead introduced activate event for tabs. here is the link