Question

我正在使用带有.load函数的jQuery来更新计数，但是如果单击按钮这么快就可以被黑客攻击。此外，我不能使用unbind，因为这会使按钮在第一次单击后无法使用。

这是我点击按钮时使用的jQuery。

<script type="text/javascript">
$(function() {

    // update "likes" of a post
    $(".bubble-like a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-like').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
    });

    // remove my like from a post
    $(".bubble-unlike a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-liked').fadeOut(200);
        $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
        $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
    });

});
</script>

如果我点击太快或反之，则不止一次执行加载。我还解释说unbind无济于事。

有什么想法吗？

更新

我不确定我是否这样做是正确的，但似乎在我的情况下解决它...任何人都可以纠正/让我错了吗？

我将此行添加到我的点击处理程序

// update "likes" of a post
$(".bubble-like a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number);
});

// remove my like from a post
$(".bubble-unlike a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-liked').fadeOut(200);
    $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});

我将此行添加到我加载的脚本add_post_like和remove_post_like：

$('.bubble a').show();

现在它似乎只接受一次点击..这可靠吗？

Answer 1

您可以在单击按钮时禁用该按钮，并在单击其他按钮时启用，例如切换按钮。当点击喜欢时，禁用它并启用不同，反之亦然。

Answer 2

我想到了one()功能。

http://api.jquery.com/one/

Answer 3

只要单击按钮直到加载过程结束，您就可以禁用单击事件。然后在回调函数中完成后激活该事件。

血腥细节：http://api.jquery.com/load/

<强>更新

我为你做了一个简单的例子：http://jsfiddle.net/hvfc5/1/

当您单击该按钮时，它将首先删除按钮上的事件绑定，然后在加载图像后再将其绑定。但是如果你在此之后再次点击它，你会发现事件仍然可以解除绑定，但它永远不会回来。这是因为图像已经加载，因此甚至不会触发load（）函数。

这只是一个演示样本供您了解如何操作，您仍然需要根据需要自定义您自己的版本。

Answer 4

是：按钮点击的第一个动作是禁用按钮本身。这样，就不再可能实现快速点击。当然，你必须在加载后重新启用按钮。

<强>更新

叹息......这些都是关于 teh codez 的吗？

$(".bubble-like a").click(function() {
    $(".bubble-like a").attr('disabled', 'disabled');
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, 
                            function(){
                              $(".bubble-like a").removeAttr('disabled');
                            });
});

Answer 5

 $(".bubble-like a").click(function() {
  var button = $(this);
   $(this).wrap($('<button/>', {
                                "class" : "disButton",
                                 disabled: true,
                                 width: button.width()
                               }
                   )); // wrap the anchor with button with disabled property
  ...
  ..
  $("#result-likes").load('<?php bloginfo('template_directory'); ?>/ajax/add_post_like.php?post_id=' + number, function() {
    button.unwrap(); // remove the wrapping button
  });
});

你必须使用一些CSS来使按钮看起来像一个简单的文本。例如，

button.disButton {
  border: none;
  background: transparent;
}

button.disButton a{
  color: #ddd;
  text-decoration: none;
}

在这种情况下如何阻止jQuery函数执行多次？

5 个答案: