1

引导向导会传递到第二个选项卡,但不会传递到第三个或更远。事件previous根本不工作。引导向导下一个事件只能运行一次

我遇到了这个奇怪的问题,并经过多次尝试解决它,我决定问一些帮助。

传递到下一个选项卡的事件在每次尝试时都会正确触发,但只能工作一次。我隔离了我的布局的重要部分,它成功地重现了这个问题,并且只使用了外部资源,所以为了尝试一下,你只需要将它粘贴到一个html文件中即可。

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

来源:

<!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> 
+2

我唯一的想法是,你使用的是错误的库版本。我删除了在html中链接到的外部脚本,并在js部分插入了原始向导lib代码。它工作正常 - http://jsbin.com/yelafilaji/edit?html,js,output –

+0

请告诉你从哪个版本粘贴,也许我们可以拿出哪个版本应该导入 – Marek

+2

从这里拿 - https: //github.com/VinceG/twitter-bootstrap-wizard/blob/master/jquery.bootstrap.wizard.js –

回答