jQuery：在 ajax 事件后禁用链接的代码有问题答案

【问题标题】：jQuery: having trouble with code to disable link after ajax eventjQuery：在 ajax 事件后禁用链接的代码有问题
【发布时间】：2011-02-01 22:05:49
【问题描述】：

目标：在收到 ajax:success 之前禁用链接。（然后我会告诉我的应用服务器启用链接。我正在编写一个简单的棋盘游戏，并且不想在第一个响应之前收到多个 ajax 请求，因为它与游戏逻辑相混淆.

  <script type="text/javascript">
      var disableLinks = false;

  $("a").click(function(e){
    if (disableLinks){
      e.preventDefault();
    }
  });


  $("a").ajaxStart(function(){
    disableLinks = true;
  });

    $("a").ajaxStop(function(){
    disableLinks = false;
  });


</script>

下面是链接的样子：

<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true">
              <div class="ttt_square"> 
                &nbsp;
              </div>
</a>

【问题讨论】：

就语义而言，您不应该在（内联元素）中包含
（块元素）——几乎每个 HTML 验证器都会为此大喊大叫，但是如果你使用 CSS 来设置元素上的 display: block ，那么它在技术上是有效的。
更改为跨度。谢谢！

标签： javascript jquery ajax

【解决方案1】：

这是因为您的 AJAX 开始和结束事件永远不会触发。为什么？因为简单地单击链接不是 AJAX 请求，也不会触发全局 AJAX 事件。要使用全局 AJAX 事件，您需要使用 AJAX 函数，例如 .get( )、.load( ) 或 $.ajax( )

下面的代码大部分是你的...我刚刚添加了 2 行（可以甚至减少到 1，但我认为这样看起来更好）

var disableLinks = true;

$('a').click( function( e )
{
    if( disableLinks )
    {
        e.preventDefault( );
    }

    var self = $(this);
    $.ajax( { "url": self.attr( 'href' ) } );
} );


$('a').ajaxStart( function( )
{
    disableLinks = true;
} );

$('a').ajaxStop( function( )
{
    disableLinks = false;
} );

【讨论】：

嗯，我的链接有效...而且我从不离开页面。我正在使用 HTML5。
对，链接工作，但它们没有触发全局 AJAX 事件。试试这个……在你的 ajaxStart 和 ajaxStop 处理程序中，分别放入一个 console.debug( 'start' ) 和 console.debug( 'stop' ) （如果你没有控制台，找一个，或者使用 alert( 'start' ) 和 alert( 'stop' )），然后点击一些链接。您永远不会看到警报，因为这些事件永远不会触发。
嗯。说得通。关于如何实现相同目标的任何想法？
更新您的选择器以仅查找您想要禁用的链接（可能所有带有 data-remote="true" 的链接）。在 onclick 处理程序中，获取链接的 href 属性并将其用作 $.ajax( ) 请求的 URL。不要忘记继续 preventDefault( )-ing，这样链接本身就不会被跟踪。此外，返回 false 以获得良好的衡量标准。

【解决方案2】：

你有一个错字。 e.prevenDefault();应该是 e.preventDefault();

这应该足以禁用默认操作。所以你可以摆脱你的点击。

$("a").click(function(e){
    e.preventDefault();
});

编辑：也许是这样：jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

或者这个：jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

应该能解决你的问题（如果理解正确的话）

【讨论】：

我更新了代码，但在等待 ajax 完成时，我还没有禁用所有链接
您想在等待 ajax 成功时禁用链接？或者你想做什么？你的问题不是很清楚...
是的，这正是我想要的。因为我正在编写一个游戏网络应用程序。如果 AJAX 东西在最后一个完成之前发送，它会搞砸一切。我会尽量澄清我的问题。
查看我上面的更新...应该适合你。我更喜欢第二个例子。

【解决方案3】：

试试这个：

$('a').click(function(){
    if (!this.hasClass('disabled')) {
        this.addClass('disabled');
        var self = this;
        $.ajax({url: this.attr('href'),
                complete: function(jqXHR, textStatus)
                   self.removeClass('disabled');
                }
        });

    }
    return false;
});

【讨论】：

与我已经给出的答案几乎相同。事实上，看起来你甚至可能受到我的代码示例的启发。
是的，我查看了您的代码，但我的使用一个函数且没有全局变量，而是使用类。