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.