javascript - 当 ajax 代码工作时，使用 javascript 禁用 html 中的链接

Question

我在一个 html 页面中有大约 20 个链接，如下所示：

<a href="#" onclick="reserve_all(some parameters);"> <img  border="0" src="../images/shoping.gif"/></a>

该reserve_all函数是一个 ajax 代码，它通过一个耗时的查询从数据库中获取数据。我希望当查询运行时所有 20 个链接都被禁用。

Answer 1

你可以做的是在reserve_all函数和ajax调用完成时

function reserve_all()
{
  //disable function for all link
   $('a').unbind('click', reserve_all);
   $('a').bind('click', disableLink);
   //ajax call to database 


}


//on complete ajax call -- than bind link again 
   $('a').unbind('click', disableLink);
   $('a').bind('click', reserve_all);


    function disableLink(e) {
        // cancels the event
        e.preventDefault();

        return false;
    }

Answer 2

在您的全球范围内：

var aStandardAnchors = document.getElementsByTagName('a');

在您的 reserve_all 函数中：

reserve_all = function(params) {
  var aAnchors = document.getElementsByTagName('a');
  for(var i = 0; i < aAnchors.length; i++) 
    aAnchors[i].removeAttribute('onclick');

  // do the ajax call
}

并在 ajax 调用的回调中（完成时）：

var aAnchors = document.getElementsByTagName('a');
for(var i = 0; i < aAnchors.length; i++) 
  aAnchors[i].setAttribute('href',aStandardAnchors[i].getAttribute('onclick'));