Javascript 引导向导下一个事件仅工作一次
引导向导将传递到第二个选项卡,但不会传递到第三个或更远的选项卡。事件<代码>上一个完全不工作 我遇到了这个奇怪的问题,在多次尝试解决之后,我决定向stack寻求帮助 传递到下一个选项卡的事件在每次尝试时都会正确触发,但仅起作用一次。我隔离了我的布局的重要部分,它成功地再现了问题,并且只使用了外部资源,所以要尝试一下,您只需要将它粘贴到html文件中 或者你可以在我创建的JSbin上试试 资料来源:Javascript 引导向导下一个事件仅工作一次,javascript,jquery,twitter-bootstrap,twitter-bootstrap-wizard,Javascript,Jquery,Twitter Bootstrap,Twitter Bootstrap Wizard,引导向导将传递到第二个选项卡,但不会传递到第三个或更远的选项卡。事件上一个完全不工作 我遇到了这个奇怪的问题,在多次尝试解决之后,我决定向stack寻求帮助 传递到下一个选项卡的事件在每次尝试时都会正确触发,但仅起作用一次。我隔离了我的布局的重要部分,它成功地再现了问题,并且只使用了外部资源,所以要尝试一下,您只需要将它粘贴到html文件中 或者你可以在我创建的JSbin上试试 资料来源: <!DOCTYPE html> <html lang="en"> <head
<!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>
1.
2.
3.
4.
5.
6.
7.
以前的
下一个
$(文档).ready(函数(){
$(“#根向导”).bootstrapWizard({
“选项卡类”:“导航选项卡”,
onNext:函数(选项卡、导航、索引){
//log('每次截获事件');
返回true;
}
});
$(“#添加向导_上一个”)。在('click',function()上{
$('rootwizard')。bootstrapWizard('previous');
});
$('add#u wizard_next')。在('click',function()上{
//log(“每次单击事件都有效”);
$('rootwizard').bootstrapWizard('next');
});
});
您在bin示例中提到的lib版本有问题
如果您使用向导库()的1.3.1版,一切正常。我唯一的想法是您使用了错误的库版本。我删除了html中链接到的外部脚本,并在js部分插入了原始向导库代码。它在那里工作得很好-请告诉你粘贴的是哪个版本,也许我们可以找到应该导入的版本从这里开始-好的,这是
1.3.1
,我将它保存为文件,导入后就可以了。请用1.3.1
的建议写一个答案。我将接受您的答案,并可能为此打开一个GitHub问题,以避免在将来出现此问题。