如何禁用div元素內的錨標記onclick事件？

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文檔

Answer 2

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

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

檢查此演示

Answer 3

您可以使用.ajaxStart()和.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>

注意：這是一個替代解決方案。 恕我直言kedar kamthe的解決方案是解決此問題的最佳方法

Answer 6

感謝您提供這么多解決方案。

我找到了一個非常簡單的解決方案。

解：

您可以使用CSS屬性的pointer-events禁用任何元素上的click事件：

https://developer.mozilla.org/zh-CN/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");
        }
   });
}