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>
我唯一的想法是,你使用的是錯誤的庫版本。我刪除了在html中鏈接到的外部腳本,並在js部分插入了原始嚮導lib代碼。它工作正常 - http://jsbin.com/yelafilaji/edit?html,js,output –
請告訴你從哪個版本粘貼,也許我們可以拿出哪個版本應該導入 – Marek
從這裏拿 - https: //github.com/VinceG/twitter-bootstrap-wizard/blob/master/jquery.bootstrap.wizard.js –