Ajax jquery.submit live click多次运行
我使用以下代码来运行我的表单ajax请求,但是当我在按钮上使用live selector时,我可以看到ajax响应触发1次,然后如果我重试2次、3次、4次,以此类推 我使用Ajax jquery.submit live click多次运行,ajax,post,submit,jquery,Ajax,Post,Submit,Jquery,我使用以下代码来运行我的表单ajax请求,但是当我在按钮上使用live selector时,我可以看到ajax响应触发1次,然后如果我重试2次、3次、4次,以此类推 我使用.live,因为我还有一个功能,可以添加帖子,并立即显示,这样用户就可以在不刷新页面的情况下删除帖子 这就导致了上面的问题。。。使用。单击可以解决此问题,但这不是我正在寻找的理想解决方案 jQuery.fn.postAjax = function(success_callback, show_confirm) { th
.live
,因为我还有一个功能,可以添加帖子,并立即显示,这样用户就可以在不刷新页面的情况下删除帖子
这就导致了上面的问题。。。使用。单击可以解决此问题,但这不是我正在寻找的理想解决方案
jQuery.fn.postAjax = function(success_callback, show_confirm) {
this.submit(function(e) {
e.preventDefault();
if (show_confirm == true) {
if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
} else {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
return false;
})
return this;
};
$(document).ready(function() {
$(".delete_button").live('click', function() {
$(this).parent().postAjax(function(data) {
if (data.error == true) {
} else {
}
}, true);
});
});
编辑:临时解决方案是更改
this.submit(function(e) {
到
问题是我如何才能真正保护它,因为知道如何在其他浏览器上使用Firebug或相同工具的人可以很容易地更改我的Javascript代码并重新创建问题如果您不希望每次单击按钮时都绑定新的单击事件,您需要在重新绑定事件之前解除绑定该事件,或者您最终会遇到多个问题绑定
要解除与live()
绑定的事件的绑定,可以使用die()
。我认为使用die()
和live()
的语法与此类似(未测试):
但是,如果您使用的是jQuery 1.7或更高版本,请使用on()
而不是live()
,因为live()
自1.7以来就被弃用,并且有许多缺点。
有关所有详细信息,请参阅
要使用on()
可以这样绑定(我假设delete\u按钮
是一个动态添加的元素):
如果您使用的是早期版本的jQuery,则可以使用undelegate()
或unbind()
和delegate()
。我相信语法类似于上面的on()
编辑(2012年8月29日)
问题是我怎样才能真正地保护它,因为
如何在其他浏览器上使用Firebug或相同的工具很容易改变
我的Javascript代码并重新创建问题
您可以使用一些保护脚本的方法,但不能阻止任何人针对您的站点执行自己的自定义脚本
要至少在某种程度上保护您自己的脚本,您可以:
- 在外部js文件中编写任何脚本,并在站点中包含对该脚本的引用
- 缩小要发布的文件
在外部js文件中编写任何脚本,并在站点中包含对该脚本的引用
这将使您的html变得干净,并且不会留下任何脚本的痕迹。用户可以看到脚本引用,并遵循它,因此您可以缩小要发布的文件
要包含对脚本文件的引用,请执行以下操作:
<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript" src="/scripts/myscript.min.js"></script>
相关资源
再次编辑!!!!:强>
jQuery.fn.postAjax = function(show_confirm, success_callback) {
this.off('submit').on('submit', function(e) { //this is the problem, binding the submit function multiple times
e.preventDefault();
if (show_confirm) {
if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
} else {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
});
return this;
};
$(document).ready(function() {
$(this).on('click', '.delete_button', function(e) {
$(e.target.form).postAjax(true, function(data) {
if (data.error) {
} else {
}
});
});
});
至于“人们可以使用Firebug更改我的javascript”参数,它不成立:人们还可以看到您的$.post(…)
发送的请求,并发送两次
您无法控制浏览器中发生的事情,应该保护您的服务器端处理,而不是希望“它不会在浏览器中显示两次,这样可以防止我的数据库损坏”。我尝试了两种方法,但仍然得到了确认框()多次单击“删除”按钮,但请求未完成。。。比如如果我第一次出错。。。然后重试请求将命中2次,然后3次,以此类推。@fxuser:如果您使用1.8以下的jQuery,您可以尝试使用console.log($('.delete_按钮').data('events'))
,它将向控制台输出附加到元素的所有事件。在chrome控制台中,您可以轻松地展开click event array对象,查看附加的事件数,只需多次确认它是相同的<代码>数据('events')
不会显示任何在线事件绑定,例如:我有一个临时解决方案,但如果有人更改javascript代码,他们可以重新创建问题并多次发布到服务器-检查编辑的问题不确定是否正确,但是它太详细了,你不能不+1它吗?@adeneo:谢谢你的反馈。我试着列出我能想到的导致重复事件绑定的原因以及如何防止它。关于缩小以防止自定义脚本,我不确定这是否是正确的方法,但缩小确实使查看发生了什么变得更加困难。如果有任何不正确的信息,请告诉我。对于将来遇到这种情况的人来说,获得好的信息是很重要的。
$(document).ready(function(){
$(document).off('click', '.delete_button').on('click', '.delete_button', function(){
$(this).parent().postAjax(function(data){
if (data.error == true){
}else{
}
}, true);
});
});
<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript" src="/scripts/myscript.min.js"></script>
// Syntax should be right but not tested.
$(document).ready(function() {
$(document).one('click', '.delete_button', function() {
$(this).parent().postAjax(function(data) {
if (data.error == true) {} else {}
}, true);
});
});
jQuery.fn.postAjax = function(show_confirm, success_callback) {
this.off('submit').on('submit', function(e) { //this is the problem, binding the submit function multiple times
e.preventDefault();
if (show_confirm) {
if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
} else {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
});
return this;
};
$(document).ready(function() {
$(this).on('click', '.delete_button', function(e) {
$(e.target.form).postAjax(true, function(data) {
if (data.error) {
} else {
}
});
});
});
jQuery.fn.postAjax = function(success_callback, show_confirm) {
this.bind( 'submit.confirmCallback', //give your function a namespace to avoid removing other callbacks
function(e) {
$(this).unbind('submit.confirmCallback');
e.preventDefault();
if (show_confirm === true) {
if (confirm('Are you sure you want to delete this item? You can\'t undo this.')) {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
} else {
$.post(this.action, $(this).serialize(), $.proxy(success_callback, this));
}
return false;
})
return this;
};
$(document).ready(function() {
$(".delete_button").live('click', function() {
$(this).parent().postAjax(function(data) {
if (data.error == true) {
} else {
}
}, true);
});
});