引导向导下一个事件仅工作一次
Bootstrap Wizard next event works only once
引导向导会传递到第二个选项卡,但不会传递到第三个选项卡,也不会传递到更远的选项卡。事件previous
根本不起作用。
遇到了这个奇怪的问题,经过多次尝试解决它,我决定向堆栈寻求帮助。
每次尝试时都会正确触发传递到下一个选项卡的事件,但仅工作一次。我隔离了布局中成功重现问题并仅使用外部资源的重要部分,因此要尝试一下,您只需将其粘贴到 html 文件中。
或者你可以在我在这里创建的 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>
您在 bin 示例中引用的 lib 版本存在问题。
如果您使用向导库(https://github.com/VinceG/twitter-bootstrap-wizard/blob/master/jquery.bootstrap.wizard.js)的1.3.1版,则一切正常。
相关文章:
- Jquery FadeIn FadeOut 只工作一次
- jQuery滚动功能只工作一次
- iOS鼠标中心绑定只工作一次
- mongoose.js Model.remove在循环中只能工作一次
- 复选框一次选中一个不在gridview中工作
- Regex拆分-工作一次
- EventListener只能工作一次
- jQuery animate只在单击时工作一次
- data th JS每页只工作一次
- Jquery选择选项并获取只工作一次的更改值(页面加载时)
- remove仅每隔一次进行儿童工作
- CSS 类在验证时只工作一次
- Chrome扩展程序:浏览器操作单击按钮工作一次
- 单击仅工作一次
- MVC 分部视图中的 JQuery UI 自动完成功能只能工作一次
- Yelp API、OAuth和Angular与JSONP只工作一次
- 为什么这个脚本只工作一次?只替换元素一次,然后再也不替换
- 滚动时加载更多 滚动速度时一次工作两次
- 为什么一个ng应用程序一次工作
- Ajax请求只在每隔一次工作