3

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

4

4 回答 4

4

使用变量的一种方法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。

于 2013-11-19T21:10:07.117 回答
4

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

<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 建议的那样，使用标志进一步管理它。

于 2013-11-19T21:16:43.997 回答
2

我会用一堂课来管理这个（假设可能有一些你想要工作的链接）。您不想工作的所有链接都给他们提供了可阻止的类。

然后，您还可以在 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;
});
});
于 2013-11-19T21:09:12.017 回答
1

我会通过声明一个变量来解决这个问题，并且只有在变量没有被触发的情况下才允许 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!');
        }
    });
});
于 2013-11-19T21:15:47.247 回答