Выполнить .click(функция () только первый щелчок

Я пытаюсь выполнить данный .click(function() только при первом щелчке, но он всегда выполняется при нажатии.

Это работает, когда нажмите .more-post-button, он добавит класс loading к .main ul и show-more-post к .main li, после чего удалите класс 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);

});

Мой вопрос в том, как сделать это только при первом клике, а не при каждом клике.
Заранее спасибо.


javascript click jquery addclass removeclass
person Aariba    schedule 29.07.2015    source источник
comment
через 7 секунд, когда класс loading будет удален, он должен снова работать?   -  person Mohit Kumar    schedule 29.07.2015
comment
Не хочу .click(function() каждый раз, хочу только в первый раз.   -  person Aariba    schedule 29.07.2015
comment
api.jquery.com/one   -  person Mohit Kumar    schedule 29.07.2015
comment
jsfiddle.net/3why3vLt/1   -  person Mohit Kumar    schedule 29.07.2015
comment
проверьте это stackoverflow.com/questions/12885660/   -  person Light    schedule 29.07.2015

Ответы (6)


arrow_upward
9
arrow_downward

Пытаться:

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

Он справится с этим только один раз.

person artm    schedule 29.07.2015

arrow_upward
6
arrow_downward

Зачем все усложнять, попробуйте простое закрытие. Вы также не будете загрязнять глобальное пространство имен! Демонстрация доступна здесь

(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);
})();
person fubbe    schedule 29.07.2015
comment
Это а) все еще оставляет неиспользуемый обработчик подключенным и б) гораздо более длинный код и в) на самом деле более сложный, а не менее :) Просто используйте one, так как это является вопросом jQuery. - person Gone Coding; 29.07.2015
comment
Javascript — это все о замыканиях. Что заставляет вас думать, что это сложно? Вопрос также помечен javascript, jQuery - это просто основа для него. - person fubbe; 29.07.2015

arrow_upward
2
arrow_downward

Я бы использовал функцию 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);

});

Скрипка

person Mike    schedule 29.07.2015

arrow_upward
2
arrow_downward

На самом деле вы можете отправить addEventListener опцию { once: true }, чтобы она срабатывала только один раз. Таким образом, добавив до @fubbe, а также используя только javascript, это будет быть:

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

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

Источник :

person Sylhare    schedule 14.02.2018

arrow_upward
1
arrow_downward

Используйте unbind в своей функции, чтобы удалить все события

$(this).unbind();

Из jQuery 1.7 рекомендуется использовать .off.

$(this).off();
person thllbrg    schedule 29.07.2015

arrow_upward
1
arrow_downward

сохранить его в переменной:

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);
}
});
person messerbill    schedule 29.07.2015
comment
это не сработает. .click - это привязка, так что это будет происходить каждый раз. вам нужно поместить проверку флага внутри функции щелчка - person Pedro Estrada; 29.07.2015