Question

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

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

最好的方法是什么？

Answer 1

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

Answer 2

当单击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上的click事件。

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

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

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();
});