引导向导下一个事件只工作一次答案

【问题标题】：Bootstrap Wizard next event works only once引导向导下一个事件只工作一次
【发布时间】：2023-03-28 06:24:01
【问题描述】：

引导向导传递到第二个选项卡，但不会传递到第三个或更多。事件previous 根本不起作用。

我遇到了这个奇怪的问题，经过多次尝试解决后，我决定向 stack 寻求帮助。

每次尝试都会正确触发传递到下一个选项卡的事件，但仅有效一次。我隔离了我的布局中成功重现问题并仅使用外部资源的重要部分，因此要尝试一下，只需将其粘贴到 html 文件中。

或者你可以在我创建的here JSbin 上尝试一下

来源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form id="rootwizard">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul>
                        <li><a href="#tab1" data-toggle="tab">First</a></li>
                        <li><a href="#tab2" data-toggle="tab">Second</a></li>
                        <li><a href="#tab3" data-toggle="tab">Third</a></li>
                        <li><a href="#tab4" data-toggle="tab">Forth</a></li>
                        <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
                        <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
                        <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="tab1">
            1
            </div>
            <div class="tab-pane" id="tab2">
            2
            </div>
            <div class="tab-pane" id="tab3">
            3
            </div>
            <div class="tab-pane" id="tab4">
            4
            </div>
            <div class="tab-pane" id="tab5">
            5
            </div>
            <div class="tab-pane" id="tab6">
            6
            </div>
            <div class="tab-pane" id="tab7">
            7
            </div>
        </div>  
    </form>
    <button id="add_wizard_previous" class="btn btn-default">
        Previous
    </button>
    <button id="add_wizard_next" class="btn btn-default">
        Next
    </button>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
<script>
$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({
        'tabClass': 'nav nav-tabs',
            onNext: function(tab, navigation, index) {
        // console.log('event is intercepted at each time');
            return true;
            }
    });
    $('#add_wizard_previous').on('click', function() {
        $('#rootwizard').bootstrapWizard('previous');
    });
    $('#add_wizard_next').on('click', function() {
    //  console.log('event works at each click');
        $('#rootwizard').bootstrapWizard('next');
    });
}); 
</script>
</body>
</html>

【问题讨论】：

我唯一的想法是您使用了错误的库版本。我删除了您在 html 中链接到的外部脚本，并在 js 部分中插入了原始向导库代码。它在那里工作正常 - jsbin.com/yelafilaji/edit?html,js,output
请问你是从哪个版本粘贴过来的，也许我们可以想出应该导入哪个版本
从这里拿的 - github.com/VinceG/twitter-bootstrap-wizard/blob/master/…
好的，我是1.3.1，我将它保存为文件，导入并运行。请写一个答案，并建议使用1.3.1 它可以工作。我会接受你的回答，并且可能会为此打开一个 GitHub 问题以避免将来出现这种情况。

标签： javascript jquery twitter-bootstrap twitter-bootstrap-wizard

【解决方案1】：

你在bin示例中引用的lib版本有问题。

如果您使用 1.3.1 版的向导库 (https://github.com/VinceG/twitter-bootstrap-wizard/blob/master/jquery.bootstrap.wizard.js)，一切正常。

【讨论】：