我使用以下代码来运行我的表单 ajax 请求,但是当我在按钮上使用实时选择器时,我可以看到 ajax 响应触发 1 次,然后如果我重试 2 次、3 次、4 次,等等...
我使用.live
,因为我还有一个添加帖子的功能,并且该功能会立即出现,以便用户可以在不刷新页面的情况下将其删除...
然后这会导致上述问题...使用 .click
可以解决此问题,但这不是我正在寻找的理想解决方案...
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) {
至
this.unbind('submit').bind('submit',function(e) {
问题是我如何真正保护它,因为知道如何在其他浏览器上使用 Firebug 或相同工具的人可以轻松更改我的 Javascript 代码并重新创建问题
最佳答案
如果您不希望每次单击按钮时都绑定(bind)新的单击事件,则需要在重新绑定(bind)之前取消绑定(bind)该事件,否则最终会得到多个绑定(bind)。
要取消绑定(bind)与 live()
绑定(bind)的事件,您可以使用 die()
。我认为使用 die()
和 live()
的语法与此类似(未经测试):
$(document).ready(function(){
$('.delete_button').die('click').live('click', function(){
$(this).parent().postAjax(function(data){
if (data.error == true){
}else{
}
}, true);
});
});
但是,如果您使用 jQuery 1.7 或更高版本,请使用 on()
而不是 live()
,因为 live()
已被弃用从 1.7 开始,有很多缺点。
请参阅documentation了解所有详细信息。
要使用on()
,您可以像这样绑定(bind)(我假设delete_button
是动态添加的元素):
$(document).ready(function(){
$(document).off('click', '.delete_button').on('click', '.delete_button', function(){
$(this).parent().postAjax(function(data){
if (data.error == true){
}else{
}
}, true);
});
});
如果您使用的是早期版本的 jQuery,则可以使用 undelegate()
或 unbind()
和 delegate()
代替。我相信语法与上面的 on()
类似。
编辑(2012 年 8 月 29 日)
the problem is how can i protect it for real because people who know how to use Firebug or the same tool on other browsers can easily alter my Javascript code and re-create the problem
您可以在某种程度上保护您的脚本,但无法阻止任何人针对您的网站执行他们自己的自定义脚本。
为了至少在某种程度上保护您自己的脚本,您可以:
- 在外部 js 文件中编写任何脚本,并在您的网站中包含对该脚本的引用
- 缩小文件以便发布
在外部 js 文件中编写任何脚本,并在您的网站中包含对该脚本的引用
这将使您的 html 变得干净并且不会留下脚本的痕迹。用户当然可以查看脚本引用并遵循该引用,这样您就可以缩小要发布的文件。
要包含对脚本文件的引用:
<script type="text/javascript" src="/scripts/myscript.js"></script>
<script type="text/javascript" src="/scripts/myscript.min.js"></script>
缩小文件以供发布
缩小脚本文件将删除所有多余的空格并将函数名称缩短为字母,所以不会。类似于 JQuery 的缩小版。代码仍然有效,但毫无意义。当然,核心用户可以遵循无意义的命名代码并最终弄清楚你在做什么。然而,除非你值得侵入,否则我怀疑有人会在普通网站上打扰。
就我个人而言,我还没有经历过缩小过程,但这里有一些资源:
- Wikipedia - Minification (programming)
- Combine, minify and compress JavaScript files to load ASP.NET pages faster
- How to minify (not obfuscate) your JavaScript using PHP
编辑(2012 年 9 月 1 日)
回应 adeneo
关于 one() 的使用的评论。
我知道您已经通过取消绑定(bind)并重新绑定(bind)提交事件找到了问题的解决方案。
我认为,为了完整性,值得在这个答案中提及 one()
,因为将事件与 one() 绑定(bind)在一起。只执行事件,然后再次解除绑定(bind)。
作为您的点击事件,触发后,无论如何都会重新加载并重新绑定(bind)自身 one()
作为取消绑定(bind)和重新绑定(bind)的替代方案也是有意义的。
其语法类似于 on()
,记住动态元素。
// 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 {
}
});
});
});
关于ajax - jquery .submit live click运行多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12125820/