Question

如何在链接上点击用户多次后停止加载功能？

Jquery代码如下：

$(document).ready(function(){
$(".menu_rfr").click(function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
location.replace($(this).attr('rel'));

});

$(".menu_clickable").click(function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
$("#main").load($(this).attr('rel'));

});

});

HTML：

<div class="menu_rfr prof_info" id="prof_info" rel="?a=1">info</div>
<div class="menu_clickable prof_info3" id="prof_info" rel="?a=3">info 3</div>

编辑：

这是示例页面与此Jquery代码的链接。 link text

Answer 1

单击按钮后禁用该按钮：

$(".menu_clickable").click(function() {
    $(this).attr("disabled", "disabled");
    $("#main").html('<img src="img/spin.gif" class="spin">');
    $("#main").load($(this).attr('rel'), function() {

        // reactivate it after some loading has completed
        $(this).removeAttr("disabled");        
     });
});

您应该始终重新激活success回调中的链接，以确保加载已完成，例如：

$.get($(this).attr('rel'), function(html) {
    $("#main").html(html);
    $(this).removeAttr("disabled");
});

编辑：根据您的评论更新。如果你的'action'元素是div，你必须取消绑定click事件以防止重新点击产生效果，并在加载完成后重新绑定，例如：

function handleClick() {
    $(this).unbind("click");
    $("#main").html('<img src="img/spin.gif" class="spin">');
    $("#main").load($(this).attr('rel'), function() {

        // reactivate it after some loading has completed
        $(this).click(handleClick);        
    });        
}
$(".menu_clickable").click(handleClick);

Answer 2

做karim所说的，但不仅检查它已被点击但该功能成功获取了数据。但如果你的负载每按一次就会获得新的更新，这将不起作用。

另一个想法是假设在太多快速点击中双击，所以只为元素上的dblclick事件返回false。

Answer 3

如果您没有使用输入字段（禁用它们），则可以使用.data()来跟踪请求是否正在进行，而不是响应连续的点击。

$(".menu_clickable").click(function() {
    var menuItems = $('.menu_clickable');

    if (!menuItems.data('current')) {
        $("#main").html('<img src="img/spin.gif" class="spin">');
        $("#main").load($(this).attr('rel'), function () {
            menuItems.removeData('current');
        });

        menuItems.data('current', true);
    };
});

如果您想允许多次点击（？），您可以使用相同的方法，但存储计数器而不是简单的布尔值。

Answer 4

在这种情况下你可以使用.live()，但是很干净，就像这样：

$(".menu_clickable:not(.disabled)").live('click', function() {
  $(this).addClass('disabled');
  $("#main").html('<img src="img/spin.gif" class="spin">')
            .load($(this).attr('rel'), function() {
              $(this).removeClass('disabled');
  });
});

这可以通过使用.live()来监听事件气泡并运行处理程序。当您启动加载时，它会向元素添加“disabled”类，使其不再满足.live()选择器，从而阻止它执行。当加载完成后，它将删除该类，使其再次满足.live()选择器，并且句柄将再次在click上工作/执行。

作为奖励，您可以轻松创建匹配的CSS规则，以向用户表明它已被禁用，如下所示：

.disabled { color: red; }

点击次数过多后，Jquery停止加载功能

4 个答案: