2

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

4

2 回答 2

10

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

要取消绑定与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 或更高版本,请使用自 1.7 以来已弃用的 ason()而不是live()as ,并且有许多缺点。 有关所有详细信息,请参阅文档live()

要使用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()orunbind()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 {

            }
        });
    });
});​
于 2012-08-25T21:42:24.337 回答
0
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(...),并发送两次。

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

于 2012-09-03T07:51:22.350 回答