执行 .click(function() 只有第一次点击

Question

我试图只在第一次点击时执行给定 .click(function()，但它总是在点击时执行。

它在单击 .more-post-button 时有效，它将添加 class loading 到 .main ul 和 show-more-post 到 .main li 然后删除 Class loading setTimeout 函数 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

保存在一个变量中：

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 2

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

$(this).unbind();

来自jQuery 1.7 .off 是推荐方式

$(this).off();

Answer 3

尝试：

$(".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 4

我会使用 jQuery 的 .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 5

为什么要使事情复杂化，尝试对其进行简单的关闭。您也不会污染全局名称 space！演示进行 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 6

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

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

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

来源：

执行 .click(function() 只有第一次点击

Execute .click(function () only first click

javascript

jquery

click

addclass

removeclass