jquery - 在 ajax 调用期间禁用链接的最佳方法是什么？

Question

我有这个代码来在运行 ajax 调用时显示加载图像:

$('.event').live('click', function () {
    var spinner = $("<img src='/content/images/ajax-loader.gif' />").insertAfter(this);

问题是，由于它是异步调用，如果您多次单击链接，它将显示多个微调器。显然这只是症状，因为我不想在第一个 ajax 调用返回之前允许另一个 ajax 调用。

在现有 ajax 调用的窗口中“禁用”链接或按钮的最佳方法是什么？

Answer 1

.live() 的好处是它是基于选择器的。

因为处理程序是针对具有 .event 类的元素触发的，只需更改其类，处理程序就不会再触发。

$('.event').live('click', function () {
    $( this ).toggleClass( 'event event_clicked' );
    var spinner = $("<img src='/content/images/ajax-loader.gif' />").insertAfter(this);

这将删除 event 类，并将其替换为 event_clicked，因此后续对该元素的点击将不会触发 live() 处理程序。

要恢复功能，只需再次交换类即可。