[英]Bootstrap Wizard next event works only once
Bootstrap向導將傳遞到第二個選項卡,但不會傳遞到第三或更多。 previous
活動根本無法正常工作。
我遇到了這個奇怪的問題,經過多次嘗試解決后,我決定向堆棧尋求幫助。
每次嘗試都會正確觸發傳遞到下一個選項卡的事件,但只能運行一次。 我隔離了布局的重要部分,該部分成功地重現了該問題,並且僅使用外部資源,因此要進行嘗試,您只需將其粘貼到html文件中即可。
資源:
<!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>
您在bin示例中引用的lib版本存在問題。
如果您使用向導庫的1.3.1版本( https://github.com/VinceG/twitter-bootstrap-wizard/blob/master/jquery.bootstrap.wizard.js ),則一切正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.