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');。

<强>更新

对此延迟表示抱歉，但我终于找到了一些时间来解决这个问题。

尝试将“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);

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

2 个答案: