Question

我有一个firework爆炸系统，它使用JQuery通过AJAX连接到PHP脚本来引爆烟花。唯一的问题是如果你一个接一个地点击一个启动按钮，就有可能引发比你想要的更多的烟火。

我需要一种方法来禁用页面上的所有其他链接，直到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;
});
});

Answer 4

我会通过声明一个变量来解决这个问题，并且只有在变量未被触发时才允许AJAX触发：

$(document).ready(function() {

    var launch_processing = false;

    $(".button").on("click",function() {
        if(launch_processing === false){

            launch_processing = true;

            $.ajax({
                type: "POST",
                url: "launch.php",
                data: {FID:$(this).attr('id'),Length:$('#FireLength').val()},
                success: function(data) {

                },
                complete: function(){
                    launch_processing = false;
                }
            });
        }
        else{
            alert('Are you mad?!?! Fireworks are in progress!');
        }
    });
});

在ajax加载时，JQuery阻止链接工作

4 个答案: