Правильная техника jQuery для отключения кнопки с сообщением ajax, а затем повторно включите кнопку на Завершить

Question

У меня есть кнопка, которая выполняет запись ajax - я хочу отключить кнопку, затем выполнить свою работу, а затем по завершении - я хочу снова включить кнопку. Мое взаимодействие включает в себя замену кнопки изображения (на кнопку изображения, выделенную серым цветом), и представление счетчика. По завершении я прячу спиннер и восстанавливаю исходное изображение кнопки.

Мой подход включает в себя отмену привязки, а затем повторную привязку события click.

Вот мой код - он прекрасно работает - но я хочу знать, является ли это правильной / эффективной / приемлемой стратегией?

// 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

То, что у вас работает, но это немного расточительно, так как добавляет каждый раз при запуске функции обработчик новый ajaxStart и ajaxComplete, но я бы сделал одно предложение: измените ваш .unbind() позвоните, чтобы быть более конкретным, так как у вас есть информация.Если вы измените это:

.unbind('click')

На это:

.unbind('click', updateClubName)

Вы можете иметь другие click события без вмешательства .unbind(), это будет только снимите привязку с одного обработчика.

---

Общая лучшая альтернатива ( для меня , вы можете обсудить, "лучше" ли это) без повторного связывания будет хранитьпеременная, чтобы знать, что вы в настоящее время публикуете, используя $.data() и .data(), например:

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

При таком подходе, если вы делаетеa POST данные для «публикации» - true, и будущие клики просто отбрасываются ... пока ответ не вернется и ваш код success не будет запущен, кнопка будет снова включена.Это тот же эффект , но без дублирующих обработчиков и без повторного связывания.