2

我正在使用带有 .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();

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

4

5 回答 5

2

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

于 2012-05-17T16:46:53.620 回答
2

one()想到了这个功能。

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

于 2012-05-17T16:47:08.810 回答
2

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

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

更新：

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

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

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

于 2012-05-17T16:50:10.197 回答
1

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

更新

叹息......这都是关于密码的，对吧？

$(".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');
                            });
});
于 2012-05-17T16:46:30.600 回答
0 
 $(".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;
}
于 2012-05-17T16:50:04.157 回答