jQuery Unbind，Restore Bind

Question

我有一组元素：

<a class="post-thumb" href="http://google.com">
  <img src="http://placehold.it/100x100" alt="" />
</a>

<a class="post-thumb" href="http://google.com">
  <img src="http://placehold.it/100x100" alt="" />
</a>

<a class="post-thumb" href="http://google.com">
  <img src="http://placehold.it/100x100" alt="" />
</a>

当点击.post-thumb元素时，它应该为自己添加一个post-thumb--active类而不激活链接，当再次点击该元素时，它应该按照正常情况转到它的链接。如果页面滚动，那么所有.post-thumb元素都应该恢复到原始状态。

我现在使用的jQuery代码是：

var $postThumb = $('.post-thumb'),
    $postThumbStoredClick;

$postThumb.on('click', function() {

  $(this).addClass('post-thumb--active');

  $postThumbStoredClick = $postThumb.data('events').click[0].handler;

  $(this).unbind('click');

  return false;

});

$(window).scroll(function() {

  $postThumb.removeClass('post-thumb--active');

  $postThumb.bind('click', $postThumbStoredClick);

});

这不起作用100％，例如，如果您单击.post-thumb元素然后单击旁边的元素然后它会触发链接，这不应该发生。

如果有人可以提供帮助，那会很好，因为这会让我发疯。

Answer 1

如果元素具有类post-thumb--active，则从click事件处理程序返回。

$postThumb.on('click', function() {
    if ($(this).hasClass("post-thumb--active")) return;
    $(this).addClass('post-thumb--active');
    $postThumbStoredClick = $postThumb.data('events').click[0].handler;
    return false;
});

并将窗口滚动处理程序更改为此...

$(window).scroll(function() {
    $postThumb.removeClass('post-thumb--active');
});

这样，您就不必根据其他任何内容删除和重新分配事件处理程序。