在 AJAX 调用期间阻止其他链接工作答案

【问题标题】：Prevent other links from working during AJAX call在 AJAX 调用期间阻止其他链接工作
【发布时间】：2012-03-09 00:35:29
【问题描述】：

我有一个包含多个链接的页面，每个链接执行不同的 AJAX 调用，然后在页面的另一个区域动态插入一些数据。当用户点击这些链接中的任何一个时，我想禁用所有其他链接，直到来自调用的数据返回，所以他们不能一次发出多个请求。

这些链接都位于同一个<div>，因此我可以轻松地定位所有这些链接，而无需触及页面其他地方的其他“常规”链接。

最好的方法是什么？

【问题讨论】：

【解决方案1】：

当单击 A 类的东西时，如何防止具有 B 类的链接的默认行为？

HTML：

<a href="1" class="linkTypeA">Link</a>
<a href="2" class="linkTypeB">Link 2</a>
<a href="3" class="linkTypeB">Link 3</a>

脚本：

$(document).on("click", "a.linkTypeA", function() {
   $('.linkTypeB').click(function(e) { e.preventDefault(); });
})

当您想允许对 linkTypeB 的点击重新开始工作时，您需要取消对 linkTypeA 的点击事件的绑定。

$("a").unbind("click");

如果您不想使用类，您可以检查点击的源元素并阻止源元素以外的所有标签的默认行为。

【讨论】：

【解决方案2】：

其中一种方法是显示具有高 z-index 的半透明图像。图像可以覆盖您的 div。这样，所有内容仍然可见但不可点击。

【讨论】：

【解决方案3】：

我认为最简单的方法是每当单击链接时，在页面顶部创建一个大 div 并显示一个加载图标，以便用户可以单击该 div 下方的任何内容。然后在ajax调用结束后隐藏加载div。

你可以使用已经制作好的加载插件，比如jquery showloading

只需要做

$("#id_div_to_disable").showLoading();

在ajax调用之后

$("#id_div_to_disable").hideLoading();

它还有其他功能

【讨论】：

【解决方案4】：

您可以在 ajax 运行时使用 prevent default，例如 beforeSend:

$("a")
.click(function(event){

event.preventDefault();
});

【讨论】：