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

JQuery prevent links working whilst ajax is loading

本文关键字：链接 工作 加载 ajax JQuery      更新时间：2023-09-26

我有一个烟花引爆系统，它使用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/

单向使用变量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效果的链接不透明度。

我会使用实际的按钮，而不是链接，并在单击时禁用它们。在按钮上使用类将其与页面上的其他按钮区分开来。

<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的建议，用旗帜进一步管理它。

我会用一个类来管理它（假设可能有一些链接需要处理）。所有你不想工作的链接都会被类阻止。

然后，你也可以在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;
});
});

我会通过声明一个变量来解决这个问题，并且只允许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!');
        }
    });
});
相关文章：