ajax - jquery .submit live click运行多次

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

如果您不希望每次单击按钮时都绑定(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);
    });
});​

相关资源

• live()
• die()
• on()
• off()
• unbind()
• delegate()
• undelegate()
• one()

<小时/>

再次编辑!!! :

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 {

            }
        });
    });
});​