Запретить работу других ссылок во время вызова AJAX

Question

У меня есть страница с несколькими ссылками, каждая из которых выполняет различные вызовы AJAX, а затем динамически вставляет некоторые данные в другую область страницы.Когда пользователь нажимает на любую из этих ссылок, я хочу отключить все остальные, пока не вернутся данные из вызова, чтобы они не могли сделать несколько запросов одновременно.

Все ссылки расположены втот же <div>, так что я могу легко настроить таргетинг только на все из них, не касаясь других «обычных» ссылок в других местах на странице.

Как лучше всего это сделать?

Answer 1

Как насчет предотвращения поведения по умолчанию для ссылок, имеющих класс B, при щелчке чего-либо из класса A?

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

Вам нужно будет отменить привязку события click для linkTypeA, если вы хотите, чтобы щелчки на linkTypeB снова начали работать.

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

Если вы не хотите использовать классы, вы можете проверить источникэлемент click и предотвращает поведение по умолчанию для всех тегов, кроме исходного элемента.

Answer 2

Один из способов сделать это - показать полупрозрачное изображение с высоким z-индексом. Изображение может покрыть ваш div. Таким образом, все еще видно, но не кликабелен.

Answer 3

вы можете использовать предотвращение по умолчанию во время работы ajax, скажем на beforeSend:

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

event.preventDefault();
});

Answer 4

Я думаю, что самый простой способ - всякий раз, когда нажимаешь на ссылку, создаешь большой div в верхней части страницы и показываешь значок загрузки, чтобы пользователь мог щелкнуть что-нибудь под этим div. а затем скрыть загрузочный div после завершения вызова ajax.

Вы можете использовать уже сделанные загрузочные плагины, такие как jquery showloading

просто нужно сделать

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

и после вызова ajax

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

он также имеет другие функции