我在底部有下一个和上一个按钮的标签,当我第一次加载页面ajaxloads数据到标签一,当我点击下一个表格将提交罚款,但如果我按下一个后按下它将’拉另一个ajax到填充第一次潜水的方式与我在加载时的方式相同,但是当我点击下一步提交表单时,ajax请求加倍并提交两次,然后4次8等,我怎么能阻止这种情况发生….我的我的一个页面上的
jquery是相同的：
$(document).on("click",".prevIoUs",function()
{
$.ajax({
url: '<?PHP echo Config::get('URL'); ?>wizzard/personal_information',type: 'GET',success: function(data){
$('#tab2').html('');
$('#tab2').removeClass('active');
$('.tab_2').removeClass('active');
$('#tab1').html(data);
$('#tab1').addClass('active');
$('.tab_1').addClass('active');
}
});
});
$(document).on("click",".next",function()
{
$('#update_contact_information').on("submit",function()
{
$.ajax({
url: $(this).attr('action'),type: $(this).attr('method'),dataType: 'json',data: $(this).serialize(),success: function(data){
if(!data.success){
$.notify(data.error,{
className:'error',clickToHide: true,autoHide: true,globalPosition: 'bottom right'
});
$.ajax({
url: '<?PHP echo Config::get('URL'); ?>wizzard/employment_history',success: function(data){
$('#tab2').removeClass('active');
$('.tab_2').removeClass('active');
$('#tab2').html('');
$('#tab3').html(data);
$('#tab3').addClass('active');
$('.tab_3').addClass('active');
}
});
}else{
$.notify(data.success,{
className:'success',globalPosition: 'bottom right'
});
$.ajax({
url: '<?PHP echo Config::get('URL'); ?>wizzard/employment_history',success: function(data){
$('#tab2').html('');
$('#tab2').removeClass('active');
$('.tab_2').removeClass('active');
$('#tab3').html(data);
$('#tab3').addClass('active');
$('.tab_3').addClass('active');
}
});
}
}
});
return false;
});
$('#update_contact_information').trigger('submit');
});
我的标签：
<div class="panel-body">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active tab_1"><a href="#tab1" data-toggle="tab"><?PHP echo System::translate("Personal information"); ?></a></li>
<li class="tab_2"><a href="#tab2" data-toggle="tab"><?PHP echo System::translate("Contact information"); ?></a></li>
<li class="tab_3"><a href="#tab3" data-toggle="tab"><?PHP echo System::translate("Employment history"); ?></a></li>
<li class="tab_4"><a href="#tab4" data-toggle="tab"><?PHP echo System::translate("Qualification history"); ?></a></li>
<li class="tab_5"><a href="#tab5" data-toggle="tab"><?PHP echo System::translate("Avatar"); ?></a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
</div>
<div class="tab-pane" id="tab2">
</div>
<div class="tab-pane" id="tab3">
</div>
<div class="tab-pane" id="tab4">
</div>
<div class="tab-pane" id="tab5">
</div>
<ul class="pager wizard">
<li class="prevIoUs"><a href="javascript:;"><?PHP echo System::translate("PrevIoUs"); ?></a></li>
<li class="next"><a href="javascript:;"><?PHP echo System::translate("Next"); ?></a></li>
</ul>
</div>
</div>
和最初的电话：
<script>
$(function(){
$.ajax({
url: '<?PHP echo Config::get('URL'); ?>wizzard/personal_information',success: function(data){
$('#tab1').html(data);
}
});
});
</script>
解决方法
在之前的两个答案中,人们(正确地)建议您重构代码,以避免在另一个事件处理程序中注册事件处理程序.然而,由于你不接受这些答案,我想这并不能完全回答这个问题.
您要做的是在单击“下一步”按钮时简单地提交表单的内容.同时,此按钮不是表单的一部分,因此只需单击它就不会触发“提交”事件.所以你手动触发事件.
现在您的描述中有些奇怪的是,您的ajax请求在每次点击时都会加倍.通常,每次点击都会增加一个请求.请参阅我的小提琴here,这是您的代码的简化版本.
var form = $('form');
$(document).on('click','.next',function(){
form.on('submit',function() {//with every click one more handler is registered. Click the "click" link several times to see
alert('submit fired');
return false;
});
form.trigger('submit')
})
因此,问题出现了：你在哪里用$(document).on注册你的处理程序(“click”,“.next”,function()？你需要确保这个处理程序只注册一次.为此你可以将警报(‘注册处理程序’)放在代码中的这一行之前进行检查.
注册事件处理程序的正确顺序显示在此modified fiddle中.代码为：
var form = $('form');
$(document).on('click',function(){
form.trigger('submit')
})
form.on('submit',function() {//with every click one more handler is registered. Click the "click" link several times to see
alert('submit fired');
return false;
});
那么继续,你可以尝试我的建议,让我知道结果吗？
附：我不确定为什么你需要触发表单提交.对于您的ajax请求,您正在序列化表单并取消初始提交(您返回false;).因此,我建议完全避免使用“提交”事件,而只是在“点击”处理程序中完成所有工作.
所以问题的第二部分是如下.每次“下一次”点击都会附加新的事件监听器,你正在替换你的标签的html,如$(‘#tab2’).html(data);,而且数据不仅包含标记,还包含js代码当你插入它时被执行(顺便说一下,我不知道它是这样工作的,这很好).我认为你所期待的是,一旦删除了标记(html),相应的事件监听器也将被删除.但实际情况并非如此.为什么？因为您使用以下代码开头的代码委托您的事件监听文档：
$(document).on("click",function()
这里$(文档)是你附加你的听众.我强烈建议您查看this original jquery explanation of event delegation,而不是详细说明.
那么你如何解决它？有几种不同的方式.可能最简单的一个(最少量的代码编辑)是在你执行.html(数据)之前删除你的事件监听器.另一种方式,也很简单,就是写
$('.next').on("click",function(),
正如你在qualification_history.PHP中所做的那样.这样,您将事件附加到元素本身,而不是文档.唯一的问题是,在执行此代码之前,您需要确保存在相应的DOM元素(因此您可以将代码放在标记之后).
