Question

我有一个执行ajax帖子的按钮 - 我想禁用按钮，然后执行我的工作，然后完成后 - 我想重新启用按钮。我的交互包括交换图像按钮（灰显图像按钮）和呈现微调器。完成后，我隐藏微调器并恢复原始按钮图像。

我的方法包括取消绑定，然后重新绑定点击事件。

这是我的代码 - 它运作得很好 - 但是，我想知道这是否是一个正确/有效/可接受的策略？

// Update club name
$j('#btnUpdateClubName').bind('click', updateClubName);

function updateClubName() {
    var $this = $j(this);
    var $spinner = $this.next('.spinner');
    var renderURL = RES.BuildClubUpdateURL("UpdateClubName");

    $this.ajaxStart(function() {
        $this.attr("src", imgPathSaveAndUpdateBtnDisabled).unbind('click').addClass('wait-cursor');
        $spinner.show();
    });

    $j.ajax({ type: "POST", data: $j('#hidStandingOrderId, #txtClubName, #clubOrderIdEditClubName').serialize(), url: renderURL, dataType: 'html', contentType: 'application/x-www-form-urlencoded',
        success: function(data) {
            // do some stuff
            }
        }
    });

    $this.ajaxComplete(function() {
        $spinner.hide();
        $this.attr("src", imgPathSaveAndUpdateBtn).bind('click', updateClubName).removeClass('wait-cursor');
        $j("#cbEditClubName").colorbox.close();
    });
}

Answer 1

你有什么工作，但它有点浪费，因为每次函数运行时它都会添加一个 new ajaxStart和ajaxComplete处理程序，我会提出一个建议，将您的.unbind()电话更改为更具体，因为您拥有相关信息。如果你改变了这个：

.unbind('click')

对此：

.unbind('click', updateClubName)

您可以在没有.unbind()干扰的情况下举办其他click个活动，只有取消绑定一个处理程序。

总体上更好的选择（ to me ，你可以辩论它是否“更好”）没有重新绑定就是存储一个变量，知道你当前正在使用$.data()和{ {3}}，例如：

$j('#btnUpdateClubName').bind('click', updateClubName);

function updateClubName() {
    if($.data(this, "posting")) return false;   //are we posting? abort!
    $.data(this, "posting", true);              //set variable
    var $this = $j(this);
    var $spinner = $this.next('.spinner');
    var renderURL = RES.BuildClubUpdateURL("UpdateClubName");

    $this.attr("src", imgPathSaveAndUpdateBtnDisabled).addClass('wait-cursor');
    $spinner.show();

    $j.ajax({ type: "POST", data: $j('#hidStandingOrderId, #txtClubName, #clubOrderIdEditClubName').serialize(), url: renderURL, dataType: 'html', contentType: 'application/x-www-form-urlencoded',
        success: function(data) {
            // do some stuff
            $spinner.hide();
            $this.attr("src", imgPathSaveAndUpdateBtn).removeClass('wait-cursor')
                 .data("posting", false);   //clear it out, ready to post again
            $j("#cbEditClubName").colorbox.close();
        }
    });
}

使用这种方法，如果您正在进行POST，“发布”的数据为true，未来的点击就会放弃......直到响应回来并且您的success代码运行是重新启用按钮。它与效果相同，但没有重复的处理程序，也没有重新/不绑定。

正确的jQuery技术禁用带有ajax帖子的按钮，然后重新启用按钮onComplete

1 个答案: