JQuery在ajax加载时防止链接工作

Question

我有一个烟花爆震系统，它使用JQuery连接到一个PHP脚本通过AJAX引爆烟花。唯一的问题是，如果你一次又一次地点击一个发射按钮，就有可能燃放比你想要的更多的烟花。

我需要一种方法来禁用页面上的所有其他链接，直到ajax完成并收到响应为止。我试过：

//Prevent clicks
$("body").find("a").click(function (e) { e.preventDefault(); });
//Re-enable clickable links
$("body").find("a").unbind("click");

我当前的ajax脚本是：

$(document).ready(function() {
$(".button").on("click",function() {
    //Disable all other links
    $.ajax({
        type: "POST",
        url: "launch.php",
        data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
        success: function(e) {
            //Re-enable other links once ajax is complete
        }
    });
    return false;
});
});

更好的是，如果按钮是灰色的，而等待回应。我在http://joshblease.co.uk/firework/有一个演示脚本

Answer 1

使用变量disabled的一种方法

$(document).ready(function() {
var disabled = false;
$('a').css('opacity','0.4');
$(".button").on("click",function() {
    //Disable all other links
    disabled = true;
    $.ajax({
        type: "POST",
        url: "launch.php",
        data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
        success: function(e) {
            //Re-enable other links once ajax is complete
            disabled = false;
            $('a').css('opacity','1');
        }
    });
    return false;
});
});

$('a').click(function(event){
    if(disabled)
        event.preventDefault();
});

更新

更改了disabled效果的链接不透明度。

Answer 2

我会使用实际的按钮，而不是链接，并禁用他们当一个被点击。使用按钮上的类，将其与页面上的其他按钮区分开来。

<input type="button" class="launch" ... >
  ...
$(document).ready(function() {
    $("input[type=button].launch").on("click",function(event) {
        // We will handle the button, prevent the standard button press action.
        event.preventDefault();
        //Disable all other links
        $('input[type=button].launch').disable();
        $.ajax({
            type: "POST",
            url: "launch.php",
            data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
            success: function(e) {
                //Re-enable other links once ajax is complete
                $('input[type=button].launch').enable();
            }
        });
        return false;
    });
});

按照@MonkeyZeus的建议，再用一个旗子来管理它。

Answer 3

我会用一个类来处理这个问题(假设可能有一些您想要使用的链接)。所有您不想使用的链接都会给它们类块。

然后，您也可以在css中为您的a.disabled类设置样式，将链接(或任何您想要的)进行灰色化。

$(document).ready(function() {
$(a.blockable).click(function(e) {
    if($(this).hasClass('disabled'))
    {
        e.preventDefault();
    }
}
$(".button").on("click",function() {
    $('a.blockable').addClass('disabled');
    $.ajax({
        type: "POST",
        url: "launch.php",
        data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
        success: function(e) {
            $('a').removeClass('disabled');
        }
    });
    return false;
});
});