Question

我有这段代码在运行ajax调用时显示加载图像：

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

问题在于，由于它是异步调用，如果多次单击链接，它将显示多个微调器。显然这只是sympton，因为我不想在第一个回复之前允许另一个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()处理程序。

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

Answer 2

你可以做的是在点击它之后删除链接上的监听器（或者添加一个只需return false;的监听器来停止事件，然后在完成ajax调用后将监听器重新分配给链接这样，它就会被禁用，因为请求需要很长时间。

因此，将回调存储在单独的变量中以便于分配可能会很好。

Answer 3

您可以隐藏链接，或将其替换为无功能但视觉上相似的内容。
您可以使用视觉上类似的div覆盖链接，以防止人们点击它。
您可以插入一个有状态的开关来捕获链接上的点击并调用event.stopPropagation（）。

当AJAX呼叫终止时，您可以将其中的每一个重置为先前的状态。

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

3 个答案: