jQuery UI tab selection from Ajax loaded content

Question

I have a set a jQuery UI tabs that pull in a multitude of information. On one of those tabs is a table. In the table, I have a click event on one of the columns. When the user clicks on that column, an event is supposed to execute some code and then programatically change a tab selection.

I've used an "on" function for the click event, since the table does not yet exist at the time the DOM originally renders. I can interact with the Ajax-created data, but I'm not able to update the tab selection. Can someone please explain to me what's going on?

Here's my click event:

$("#summaryTable td").live("click",function() {
    var myCol = $(this).index();
    if (myCol == 0) {
        var $tr = $(this).closest('tr');
        var myRow = $tr.index();
        $("#divSummary").show();
        $("#storeDetails").hide();   
        selectedStoreTab = $.trim($(this).html());
        $("#store").val(selectedStoreTab);
        lastSelectedStoreTab = selectedStoreTab;
        //loadData();

        var tabDivSelector = "#tab-container-" + selectedMarketTab;
        var tabSelector = "#tab-" + selectedStoreTab;
        var index = $(tabDivSelector + " a[href='" + tabSelector + "']").parent().index();  // Gets the index correctly!

        $(tabDivSelector).tabs( "select", index );  // Doesn't set the tab!
    }
});

I've validated that the index gets set properly in Firebug and that the DIV is named correctly. The index just isn't being applied to the tab set and I cannot figure out why. I've also tried "live" and "delegate" in place of "on" with no success.

Answer 1

I placed the bind event in a function and called the function on document load and again after the AJAX called completed, therefore reinitializing the click event on the tabs and content.