如何强制选择特定的jquery-ui选项卡索引或强制在特定选项卡上选择“选项卡选择”事件？

Question

我有以下功能：

function createTabs(selectorText, selected) { 
    var tabs = $(selectorText).tabs();   
    if(selectorText == '#content .tabs') { 
     contentTabs = tabs; 
     $(selectorText).unbind('tabsselect').bind('tabsselect', function(event, ui) {    
      var queryNumber = $(ui.tab).data('query_number'); 
      if(queryNumber) { 
       $(ui.panel).html('<table id="table"></table>') 
       var table = $(ui.panel).find('table'); 
       populateFlexigrid(table, queryNumber); 
      } 
     }); 
    } 

    if(!selected) { 
     selected = 0; 
     tabs.tabs('select', 0) 
    } 
    tabs.tabs('select', selected); 
} 

在在函数结束时if声明我设置所选标签到任何标签应选择。在输入此if语句时，选中的选项卡始终为0，因为选项卡刚创建。所以我的问题是，我试图选择一个已经被选中的标签。这意味着我绑定到该选项卡的功能没有执行。

有没有什么办法可以强制标签被选中或者该标签上的tabsselect事件让我的绑定函数运行？

Answer 1

我不喜欢this solution，但它的工作。如果有人有更好的方式，请发布。

var selectedTab = $tabs.tabs('option', 'selected'); 
$tabs.find('li').eq(selectedTab).removeClass('ui-tabs-selected').end().tabs('select', selectedTab); 

Answer 2

尝试在选择标签后添加tabs.trigger('tabsselect');。

UPDATE：

对不起这个延迟，但我终于找到了一段时间，在这方面努力。

尝试将“tabsselect”函数重写为命名函数（非匿名），这样您可以在任何时候使用它（在构造事件提供的ui参数之后）调用它。下面的示例代码（working fiddle）：

function tabSelected(event, ui) { 
    var queryNumber = $(ui.tab).data('query_number'); 
    var table = $(ui.panel).find('table'); 
    console.log('Tab ' + ui.index + ' "tabsselect" event triggered.'); 
    if (queryNumber) { 
     $(ui.panel).html('<table id="table"></table>'); 
     populateFlexigrid(table, queryNumber); 
    } 
} 

function createTabs(selectorText, selected) { 
    var tabs = $(selectorText).tabs(); 
    var tab = null; 
    var panel = null; 
    var ui = { 
     "index": 0, 
     "panel": tab, 
     "tab": panel 
    }; 

    if (selectorText == '#content .tabs') { 
     contentTabs = tabs; 
     $(selectorText).unbind('tabsselect').bind('tabsselect', tabSelected); 
    } 

    if (!selected) { 
     selected = 0; 
     tabs.tabs('select', 0); 
    } 

    //create the ui parameter 
    ui.index = selected; 
    ui.tab = $(tabs.children('ul:first').children('li')[selected]).children('a')[0]; 
    ui.panel = tabs.children('div')[selected]; 

    //run the "tabsselect" function 
    tabSelected(null, ui); 
} 
createTabs('#content .tabs', 0);​