如何在ajax运行时禁用click功能，同一个click启动ajax运行，ajax完成后重新启用click功能答案

【问题标题】：how to disable the click function while ajax running, same click starts ajax running, and after the ajax is complete, re-enable the click function如何在ajax运行时禁用click功能，同一个click启动ajax运行，ajax完成后重新启用click功能
【发布时间】：2014-08-25 17:13:22
【问题描述】：

我有一个点击功能启动一个 ajax 帖子运行，如何在 ajax 运行时禁用相同的点击功能，并在 ajax 完成后重新启用它？下面的代码显示了我想要的：

    $('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');
    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);

           });
        }
    });

【问题讨论】：

该按钮的 onClick 事件添加属性 disabled = true 并在 ajax 响应后删除按钮标记的禁用属性
只需在点击时将disabled 属性设置为true，并在调用Ajax 回调时将其设置为false。

标签： javascript jquery ajax button click

【解决方案1】：

$('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');

    var that = $(this); //to reference the button easier
    that.attr('disabled',true); //disables the button

    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);

           });

           that.attr('disabled',false); //enables the button the button

        }
    });

【讨论】：

【解决方案2】：

最简单的方法是向元素添加一个类或 data-* 属性。当您单击它时，添加该类/属性并启动 AJAX。完成后将其删除。如果在 AJAX 正在进行时单击该类/属性，则表明它仍在运行，在删除之前不应继续。

【讨论】：

【解决方案3】：

代码如下：

$('input.btn_search').click(function () {

    // Disable before ajax starts
    $(this).attr('disabled', true);

    var xhr =  $.ajax({

    success: function (data) {

       // Enable after ajax completes
       $(this).removeAttr('disabled');
    }
});

【讨论】：

【解决方案4】：

试试这个代码：

 $('input.btn_search').click(function () {
    var val_f_name = $('input.input_first').val();
    var val_l_name = $('input.input_last').val();
    var val_country = $('select.country').val();
    var val_state = $('.select.state').val();

var thisbutton = $(this);
    thisbutton.attr("disabled", "disabled");

    $('.popup_search_distor').css('height', '400px');
    $('img.ajax_loader').css('display','block');
    var xhr =  $.ajax({
        type: "POST",
        url: $.vp + "signup/distLookup.ashx" + "?first=" + val_f_name + "&last=" + val_l_name + "&country=" + val_country + "&language=" + $.langID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('img.ajax_loader').css('display','none');
            $('table.table_data').slideDown(600);
            console.log(data);
            $.each(data, function (k, v) {
                $('td.name').append(v.FirstName);                    
           });
           thisbutton.removeAttr("disabled");
        }
    });

示例：http://jsfiddle.net/oxrooqjf/2

【讨论】：