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 –

回答