Javascript 解除绑定单击事件后jQuery开/关方法不工作
我创建了一个处理大量数据的ajax函数,因此当单击按钮时,可能需要一段时间才能得到响应。现在,当人们在网站上时,他们不停地点击,这就给我的数据库留下了重复的数据。我在谷歌上找到了jQuery的Javascript 解除绑定单击事件后jQuery开/关方法不工作,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我创建了一个处理大量数据的ajax函数,因此当单击按钮时,可能需要一段时间才能得到响应。现在,当人们在网站上时,他们不停地点击,这就给我的数据库留下了重复的数据。我在谷歌上找到了jQuery的on和off事件,用于绑定和解除绑定单击事件。当函数被激发时,unbind事件起作用,但是当响应无效时,我想再次绑定click事件,而这在我的情况下不起作用 警报get已触发,因此它将到达on函数 有人能看看我的功能,看看我做错了什么吗 $('#afrekenen').click(function(
on
和off
事件,用于绑定和解除绑定单击事件。当函数被激发时,unbind事件起作用,但是当响应无效时,我想再次绑定click事件,而这在我的情况下不起作用
警报get已触发,因此它将到达on函数
有人能看看我的功能,看看我做错了什么吗
$('#afrekenen').click(function(){
$('#afrekenen').off("click");
clearInterval(myInterval);
var fields = $('.addressform :input');
$.each(fields, function(field,val){
$(val).removeClass('errorInput');
})
var gegevens = {};
var adresform = $('.addressform').serializeArray();
$.each(adresform, function(index, val){
gegevens[this.name] = this.value;
});
if(!$('input[name=payment]:checked').val()){
var betaalwijze = 0;
}else{
var betaalwijze = $('input[name=payment]:checked').val();
}
var voorwaarden = $('input[name=voorwaarden]:checked').val();
$.ajax({
type: 'post',
url: '/inc/afrekenen.php',
data: {"gegevens":gegevens ,"betaalwijze":betaalwijze,"voorwaarden":voorwaarden},
fail: function() {
$('#afrekenen').on("click");
$('#errormsg').html('<div class="alert alert-danger">'+
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Oops something went wrong. please try again</div>');
},
success: function(data) {
response = jQuery.parseJSON(data)
if(response.isValid == false){
alert('hoi');
$('#afrekenen').on("click");
$('#errormsg').html('<div class="alert alert-danger">'+
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
+response.message+'</div>');
$.each(response.fouteVelden, function(index, object){
$('#'+object+'').addClass('errorInput');
});
}else{
if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(response.message)) {
window.location.href = response.message;
} else {
window.location.href = 'winkelwagen.php?step=afgerond';
}
}
}
});
$('afrekenen')。单击(函数(){
$('afrekenen')。关闭(“单击”);
clearInterval(myInterval);
变量字段=$('.addressform:input');
$.each(字段,函数)(字段,val){
$(val).removeClass('errorInput');
})
var gegevens={};
变量adresform=$('.addressform').serializeArray();
$.each(地址形式、函数(索引、val){
gegevens[this.name]=this.value;
});
如果(!$('input[name=payment]:选中').val()){
var betaalwijze=0;
}否则{
var betaalwijze=$('input[name=payment]:checked').val();
}
var voorwaarden=$('input[name=voorwaarden]:checked').val();
$.ajax({
键入:“post”,
url:“/inc/afrekenen.php”,
数据:{“gegevens”:gegevens,“Betaalwizze”:Betaalwizze,“voorwaarden”:voorwaarden},
失败:函数(){
$(#afrekenen')。点击;
$('#errormsg').html(''+
“×;Oops出现问题。请重试”);
},
成功:功能(数据){
response=jQuery.parseJSON(数据)
if(response.isValid==false){
警报(“hoi”);
$(#afrekenen')。点击;
$('#errormsg').html(''+
“×;”
+响应。消息+“”);
$.each(response.fouteVelden,函数(索引,对象){
$('#'+object+'').addClass('errorInput');
});
}否则{
(a-a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-z[a-a-z[a-a-a-C[a-z[a-C[a-C[a-C[a-C[a-C[a-C[a-C[a-C[a-C[a-C[a-C[a-C[a-d[a-C[a-C[a-d[a-d[a-C[a-C[a-C[C[a-C[a-d[a-d[C[a-d[C[C[a-d[a-d[C[C[C[C[C[C[C]]]目前124州州州州各州各州各州各州各州各州的本本本州州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州各州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州州\.(\d|[1-9]\d|1\d\d|2[0-4]\(a-a-z)本州各州各州(1245[0-5[0-5 0 0 0-5 5 5)的第四个[[[1-a-z]第1245 5五[10-5 5 5 5-5 5 5 5[0-5 5 5 5-5 5]号[[a-a-a-a-a-0-0-0-5[0-5]号[[10-4]除除了除了除了除了除了除了除了除了除了除了除了除了除了除了除了上述上述上述第四四四四四四四个州州州的第四四四四四四四四四四四个州州的第五[[[[[[[0 0 0 0 0 0 0-4]第四四四四四四四四个州州州州州州州]第五[[4]第五[0 0 0 0 0 0 0 0 0 0 0 0 0-5 5 5 5 5 5 5 5 5 5[0-5[0 0 0 0 0 0 0-5[0-5 5]uFFEF])([\da-f]{2})[!\$&'\(\)\*\+,;=]:\:\*)*(\/(([a-z].\d.-\.\u124; ~[\ u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])(([\da-f]{2-\uFFEF].-\.[\u124a0-\u1240a0-\\\\++=([u00A0-]|\本月日第四四四四?????????????|本月?????????????????????????????????????????????????????????????????????????????????(((\\\d-FD-f-f-f{[[[[[[[[[[2-f]本本本州州-f{{{{{{}}}本本本本州州州州-2}}}}}本本本本本本本州州州州州州州州州))的???????????????????????????????????????????????????;[!\$&'\(\)\*\+,;=]::([a-z]\d |-|-|-|-|-| ~[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])。([\da-f]{2}.[!\$&'(\++,=]::*([124a-124d]-]|_|~|(2)除了除了除了目前的10\0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0(除了除了除了除了除了除了除了除了除了除了除了试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图试图\\\\\\0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0\\\\\\\\\\\\\\| |/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|/|测试(答复、电文){
window.location.href=response.message;
}否则{
window.location.href='winkelwagen.php?step=afgerond';
}
}
}
});
我认为你应该把事情分开,这样更容易些
此外,您还可以创建一个命名函数作为click事件处理程序回调,并相应地绑定/解除绑定
$(function () {
// This will toggle the click event handler on/off.
function toggleClickHandler(toggle) {
if (toggle === true) {
$('#afrekenen').on('click', processMyRequest);
} else {
$('#afrekenen').off('click', processMyRequest);
}
}
// This will process your request (AJAX call).
var processMyRequest = function() {
toggleClickHandler(false);
clearInterval(myInterval);
var fields = $('.addressform :input');
$.each(fields, function (field, val) {
$(val).removeClass('errorInput');
});
var gegevens = {};
var adresform = $('.addressform').serializeArray();
$.each(adresform, function (index, val) {
gegevens[this.name] = this.value;
});
// Unrelated to the question:
// Note that before you had the variable "betaalwijze" declared
// twice using var. This is wrong, so I've fixed it.
var betaalwijze;
if (!$('input[name=payment]:checked').val()) {
betaalwijze = 0;
} else {
betaalwijze = $('input[name=payment]:checked').val();
}
var voorwaarden = $('input[name=voorwaarden]:checked').val();
$.ajax({
type: 'post',
url: '/inc/afrekenen.php',
data: {
"gegevens": gegevens,
"betaalwijze": betaalwijze,
"voorwaarden": voorwaarden
},
success: function (data) {
response = jQuery.parseJSON(data);
if (response.isValid === false) {
alert('hoi');
toggleClickHandler(true);
$('#errormsg').html('<div class="alert alert-danger">' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + response.message + '</div>');
$.each(response.fouteVelden, function (index, object) {
$('#' + object + '').addClass('errorInput');
});
} else {
if (/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(response.message)) {
window.location.href = response.message;
} else {
window.location.href = 'winkelwagen.php?step=afgerond';
}
}
}
}).fail(function () {
// AJAX call has failed.
toggleClickHandler(true);
});
};
// When the document is loaded, attach the click event handler
// by default.
toggleClickHandler(true);
});
$(函数(){
//这将打开/关闭单击事件处理程序。
函数切换ClickHandler(切换){
如果(切换===真){
$('afrekenen')。on('click',processMyRequest);
}否则{
$('afrekenen').off('click',processMyRequest);
}
}
//这将处理您的请求(AJAX调用)。
var processMyRequest=函数(){
切换ClickHandler(false);
clearInterval(myInterval);
变量字段=$('.addressform:input');
$.each(字段,函数)(字段,val){
$(val).removeClass('errorInput');
});
var gegevens={};
变量adresform=$('.addressform').serializeArray();
$.each(地址形式、函数(索引、val){
gegevens[this.name]=this.value;
});
//与问题无关:
//注意,在声明变量“betaalwijze”之前
//两次使用var。这是错误的,所以我已经修复了它。
var betaalwijze;
如果(!$('input[name=payment]:选中').val()){
betaalwijze=0;
}否则{
betaalwijze=$('input[name=payment]:checked').val();
}
var voorwaarden=$('input[name=voorwaarden]:checked').val();
$.ajax({
键入:“post”,
url:“/inc/afrekenen.php”,
数据:{
“gegevens”:gegevens,
“Betaalwizze”:Betaalwizze,
“沃沃沃登”:沃沃沃登
},
成功:功能(数据){
response=jQuery.parseJSON(数据);
if(response.isValid==false){
警报(“hoi”);
切换ClickHandler(true);
$('#errormsg').html(''+
“×;”+response.message+”;
$('#afrekenen').click(function(){
myAjaxFunctionality();
});
function myAjaxFunctionality()
{
$('#afrekenen').off("click");
clearInterval(myInterval);
var fields = $('.addressform :input');
$.each(fields, function(field,val){
$(val).removeClass('errorInput');
})
var gegevens = {};
var adresform = $('.addressform').serializeArray();
$.each(adresform, function(index, val){
gegevens[this.name] = this.value;
});
if(!$('input[name=payment]:checked').val()){
var betaalwijze = 0;
}else{
var betaalwijze = $('input[name=payment]:checked').val();
}
var voorwaarden = $('input[name=voorwaarden]:checked').val();
$.ajax({
type: 'post',
url: '/inc/afrekenen.php',
data: {"gegevens":gegevens ,"betaalwijze":betaalwijze,"voorwaarden":voorwaarden},
success: function(data) {
response = jQuery.parseJSON(data)
if(response.isValid == false){
alert('hoi');
$('#afrekenen').on("click", function(){myAjaxFunctionality();});
$('#errormsg').html('<div class="alert alert-danger">'+
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
+response.message+'</div>');
$.each(response.fouteVelden, function(index, object){
$('#'+object+'').addClass('errorInput');
});
}else{
if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(response.message)) {
window.location.href = response.message;
} else {
window.location.href = 'winkelwagen.php?step=afgerond';
}
}
}
}