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()和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()，您可以这样绑定（我假设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的缩小版本。代码仍然有效，但没有意义。当然，硬核用户可以遵循无意义的命名代码并最终弄清楚你在做什么。但是，除非你值得入侵我怀疑任何人都会打扰平均网站。

我个人没有经历过缩小过程，但这里有一些资源：

编辑（2012年9月1日）

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

我相信虽然在这个答案中提及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);
    });
});

相关资源

再次编辑!!!! ：

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 { } }); }); });

Answer 2

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);
    });
});

至于“人们可以使用Firebug来改变我的javascript”这个论点，它不成立：人们也可以看到你$.post(...)发送的请求，并发送两次。

您无法控制浏览器中发生的情况，并且应该保护您的服务器端处理，而不是希望“它不会在浏览器中显示两次，因此会阻止我的数据库损坏”。< / p>

jquery .submit实时点击运行多次

2 个答案:

在外部js文件中写入任何脚本，并在您的站点中包含对该文件的引用

缩小要发布的文件

相关资源