如何使用“加载”事件访问 jqueryui 选项卡索引

Question

所以我使用延迟加载的 jqueryui 选项卡 (1.10.4)，并且我知道如何查看加载事件触发，但是，每个选项卡上都会有一个表单，并且（我认为）我需要绑定我的每个选项卡事件上的可点击按钮事件。但我不知道如何判断已加载哪个选项卡。我可以告诉（通过激活事件）选择了哪个选项卡，但我需要知道何时加载特定选项卡。

感谢任何建议。

$(function() {


$("#tabs").tabs({
    load: function( event, ui ) {

//          console.log(ui.tab.id);

    },

    activate: function( event, ui ) {

        var $activeTab = $('#tabs').tabs('option', 'active');
        switch($activeTab) {
            case 0:
// **************************************************************               
// Tab #1 here 
// **************************************************************
                console.log("first tab");
                break;
            case 1:
// **************************************************************
// Tab #2 here          
// **************************************************************
                console.log("second tab");
                break;


            default:
            // No tab code
        }

    }
})

//    $("#tabs").bind("tabsload", function(e, tab) {
//        alert("The tab at index " + tab.index + " was selected");
//    });


})

Answer 1

在您的加载函数中，ui.panel 是对已加载选项卡的引用。例如：

$(function() {


    $("#tabs").tabs({
        load: function( event, ui ) {

            console.log(ui.panel);
            console.log(ui.panel.attr('id'));

            if(ui.panel.attr('id') == 'panel-1'){
                // bind click events on #panel-1 form
            }

        }
    });


})

或者 - 您可以考虑使用 jQuery 的 .on() 方法在页面加载时执行事件处理程序绑定。