Question

我有html内容，如下所示。

<div>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

问题：

当我点击任何链接时，在onClick函数中我将进行一次ajax调用。

我只想禁用标记的所有onClick事件（或禁用整个div及其所有子元素），直到获得响应之后获得ajax响应我需要重新启用所有标记onclick事件

有没有办法实现同样的目标？

Answer 1

您可以使用jqXHR的beforeSend回调，您可以在其中禁用所有锚标记和 jqXHR.always（）回调，您将启用所有锚标记。

浏览Jquery Ajax Documentation

Answer 2

 <a href="#" onclick="someFunction();">Link 1</a>

someFunction(){
    //some code here
   $.get('test.aspx', function(data){
   //do something here
   })
 return false;
}

选中此DEMO

Answer 3

您可以使用.ajaxStart()＆amp;要执行此操作的.ajaxStop() JQUERY 事件。您可以创建一个不同的CSS来禁用锚标记，如下所示：

$('a[href]').each(function () {
                        var $this = $(this);
                        if ($this.attr('href') && $this.attr('href') != '') {
                            $(this).attr('data-href', $(this).attr('href'));
                            $(this).removeAttr('href');
                        }
                    });

并启用它时

$('a[data-href]').each(function () {
                var $this = $(this);
                if ($this.attr('data-href') && $this.attr('data-href') != '') {
                    $(this).attr('href', $(this).attr('data-href'));
                    $(this).removeAttr('data-href');
                }
            });

这将删除您的href并创建自定义属性。因此，您的点击事件不会对锚标记起作用。

Answer 4

你可以试试这个：

1）将类添加到div：

<div class="myDiv">
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

2）当ajax启动时隐藏div并显示ajax成功的div：

    $(".myDiv").css('opacity','0.25');// blur div when ajax starts
    $.ajax("test.php", {
          success: function(data) {
             $(".myDiv").css('opacity','1');// display div as ajax complete
          },
          error: function() {
            alert('An error occurred');
          }
       });
    });

Answer 5

为活动状态设置标志

function someFunction(){
   var status = $('#parentDiv').attr('data-active');
   if(!status){
       $("#parentDiv").attr('data-active',true);
        //make ajax call
       $.ajax("url", {
          success: function(data) {
              $("#parentDiv").attr('data-active',false);//make false when done
          }
       });
    }
  }

<div id="parentDiv" data-active="false">
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
    <a href="#" onclick="someFunction();">Link 1</a>
</div>

注意：这是一种替代解决方案。恕我直言kedthe kamthe solution是解决这个问题的最佳方法

Answer 6

感谢您提供了这么多解决方案。

我找到了一个非常简单的解决方案。

<强>解决方案：

您可以使用CSS属性指针事件来禁用任何元素上的click事件：

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

// To disable:    
document.getElementById('id').style.pointerEvents = 'none';
// To re-enable:
document.getElementById('id').style.pointerEvents = 'auto';
// Use '' if you want to allow CSS rules to set the value

谢谢，

迪克西特

Answer 7

您可以使用beforeSend设置回调函数以禁用所有元素。并使他们成功。您可以添加一个功能来禁用/启用这些元素。在div中添加一个id。

$.ajax( 
  url: "your url",
  beforeSend: function( xhr ) {
    disabledFields(true);
  },
  success: function(){
    disabledFields(false);
  },
  error: function(){
    disabledFields(false);
  });

//
function disabledField(isDisabled)
{
   $("#myDiv").find("a").each(function(){
        if (isDisabled)
        {
            $(this).attr("disabled", "disabled");
        }
        else
        {
           $(this).removeAttr("disabled");
        }
   });
}

如何在div元素中禁用锚标记onclick事件？

7 个答案: