防止其他链接在 AJAX 调用期间工作

Question

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

这些链接都位于同一个

中，因此我可以轻松定位所有这些链接，而无需触及页面上其他位置的其他“常规”链接。

最好的方法是什么？

Answer 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");

如果您不想使用类，则可以检查单击的源元素并阻止除源元素之外的所有标记上的默认行为。

Answer 2

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

Answer 3

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

您可以使用已经制作的加载插件，例如 jquery showloading

只需要做

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

，并且在 ajax 调用之后

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

它也有其他功能

Answer 4

您可以在 ajax 运行时使用阻止默认值，例如在 beforeSend 上：

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

event.preventDefault();
});