javascript - 触发已在插件上注册的 javascript 事件处理程序

Question

抱歉，标题很血腥，将进行适当编辑。

我正在使用Twitter Bootstrap Wizard用于处理数据库操作。我真的希望能够在按下按钮时触发 onTabShow() 函数。 onTabShow() 加载数据并生成更新的表单，因此这种注册某种事件的能力将非常有帮助。该函数定义如下:

$('#location_wizard').bootstrapWizard({
        ...
        onTabClick: function (tab, navigation, index, clickedIndex) {
            ...
        },
        onNext: function (tab, navigation, index) {
            ...
        },
        onPrevious: function (tab, navigation, index) {
            ...
        },
        onTabShow: function (tab, navigation, index) {
            TRIGGER THIS FUNCTION WITHOUT SWITCHING PAGES!
        }
});

我怎样才能写出类似的东西

('#add-new').on('click', function() {
    ... AJAX some stuff ...
    ... trigger "onTabShow()" without switching tabs in the wizard ...
})

Answer 1

从插件中提取“在选项卡上显示”处理程序，以便您可以从代码的不同部分调用该函数。

$('#location_wizard').bootstrapWizard({
    //...
    onTabShow: onTabShowHandler
    //...
});

$('#add-new').on('click', function(){
    //... ajax ...
    onTabShowHandler(x, y, z);
});

function onTabShowHandler(tab, navigation, index){
    // do tab show stuff
}

编辑:其他详细信息

since x, y, z are provided within bootstrapWizard, how might I access those when triggering onTabShowHandler from the click event?

您必须自己将这些参数传递给函数。如果您在 bootstrapWizard 插件触发 onTabShowHandler 时检查每个参数，您将看到它们的值并能够模拟类似的东西。

function onTabShowHandler(tab, navigation, index){
    console.log(tab);        // element/jQuery object
    console.log(navigation); // element/jQuery object
    console.log(index);      // number
}

// in your click function...
$('#add-new').on('click', function(){
    var x = $('#tab-1');
    var y = $('#nav');
    var z = 0;

    onTabShowHandler(x, y, z); // reacts as though tab 1 was shown
});