Question

我尝试仅在第一次点击时执行给定.click(function()，但在点击时它始终执行。

点击.more-post-button后，它会将loading添加到.main ul，show-more-post添加到.main li，然后在setTimeout函数上删除类loading 7秒

JS ：

$(".more-post-button").click(function () {

  $('.main ul').addClass('loading');
  $('.main li').addClass('show-more-post');
  setTimeout(function(){
    $('.main ul').removeClass('loading');
  },7000);

});

我的问题是如何只在第一次点击时才这样做，而不是每次点击都这样做提前谢谢。

Answer 1

尝试：

$(".more-post-button").one("click", function () {

  $('.main ul').addClass('loading');
  $('.main li').addClass('show-more-post');
  setTimeout(function(){
    $('.main ul').removeClass('loading');
  },7000);
});

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

它只会处理一次。

Answer 2

为什么要复杂化，尝试简单的关闭。你也不会污染全局名称空间！演示进行here

(function(){
'use-strict';

var button = document.getElementsByTagName('button')[0];
var myHandler = function() {
    var click = 0;
    return function() {
        if(click === 0) {
            alert('single click');
        }
        click++;
    }
}();


button.addEventListener('click', myHandler, false);
})();

Answer 3

我会使用jQuery＆＃39; .one()函数。这会附加一个只会触发一次的处理程序。

修改JS

$(".more-post-button").one("click", function () {

  $('.main ul').addClass('loading');
  $('.main li').addClass('show-more-post');
  setTimeout(function(){
    $('.main ul').removeClass('loading');
  },1000);

});

Fiddle

Answer 4

实际上，您可以发送addEventListener一个选项{ once: true }，告诉它只发一次。因此，加起来@fubbe并且仅使用javascript，它将是：

var button = document.getElementsByTagName('button')[0];
var handler = function () { alert('once click'); };

button.addEventListener("click", handler, {once: true});

来源：

Answer 5

将其保存在变量中：

var clicked = false;

  $(".more-post-button").click(function () {
  if(!clicked) {
  clicked = true;
  $('.main ul').addClass('loading');
  $('.main li').addClass('show-more-post');
  setTimeout(function(){
    $('.main ul').removeClass('loading');
  },7000);
}
});

Answer 6

在您的函数中使用unbind删除所有事件

$(this).unbind();

从jQuery 1.7 .off是推荐的方式

$(this).off();

执行.click（function（）只需先点击

6 个答案: