jquery .submit实时点击运行多次

Question

我使用以下代码来运行我的表单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代码并重新创建问题

Answer 1

如果您不想在每次单击按钮时绑定新的单击事件,则需要在重新绑定之前取消绑定事件,否则最终会出现多个绑定.

解除与live()你绑定的事件可以使用die().我认为使用die()with 的语法与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已弃用,并有很多缺点.
有关所有详细信息,请参阅文档

要使用on()你可以像这样绑定(我假设它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日)

问题是如何才能真正保护它,因为知道如何在其他浏览器上使用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的缩小版本.代码仍然有效,但没有意义.当然,硬核用户可以遵循无意义的命名代码并最终弄清楚你在做什么.但是,除非你值得入侵我怀疑任何人都会打扰平均网站.

就个人而言,我还没有完成缩小过程,但这里有一些资源:

• 维基百科 - 缩小(编程)
• 组合,缩小和压缩JavaScript文件以更快地加载ASP.NET页面
• 如何使用PHP缩小(不混淆)您的JavaScript

编辑(2012年9月1日)

回应adeneo关于使用一个()的评论.我知道您已经通过解除绑定和重新绑定到提交事件找到了解决问题的方法.

我相信尽管one()在这个答案中提到完整性是值得的,因为绑定事件与one()只执行事件,然后再解除绑定.

作为您的点击事件,当被触发时,无论如何重新加载one()和重新绑定作为解除绑定和重新绑定的替代方案也是有意义的.

它的语法类似于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);
    });
});?

相关资源

• 生活()
• 死()
• 上()
• 关闭()
• 取消绑定()
• 代表()
• undelegate()
• 一()

再次编辑!!!! :

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 {

            }
        });
    });
});?