Ajax jquery.submit live click多次运行

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

我使用以下代码来运行我的表单ajax请求,但是当我在按钮上使用live selector时,我可以看到ajax响应触发1次,然后如果我重试2次、3次、4次,以此类推

我使用
.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);
    });
});​