Execute .click(function () only first click

Question

I trying to Execute given .click(function() only on first click, but it always Execute when click.

It's works when click .more-post-button it will add class loading to .main ul and show-more-post to .main li after that remove Class loading on setTimeout function 7 second.

JS:

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

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

});

My question is how to do this for only on first click, not every time click.
Thanks in advance.

Upali

after 7 second when class loading will removed should it work again? – Celebes

Don't want .click(function() every time, want to first time only. – Upali

api.jquery.com/one – Celebes

jsfiddle.net/3why3vLt/1 – Celebes

check this "#12886160" – Wauters

Answer 1

Try:

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

It'll handle it only once.

Udine

Answer 2

Why complicating things, try a simple closure on that. You won't pollute globale name space, too! Demo goes 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);
})();

Evalyn

That a) still leaves an unused handler connected and b) is much longer code and c) is actually more complicated, not less :) Just use one as this is a jQuery question. – Folse

Javascript is all about closures. What makes you think it's complicated? The question is tagged by javascript as well, jQuery is just a framework to it. – Evalyn

Answer 3

Actually you can send in the addEventListener an option { once: true } to tell it to fire only once. So adding up to @fubbe and also using only javascript, it would be:

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

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

Source :

• MDN - addEventListener
• webreflection - DOM Listener: capture, passive, and once

Georgiegeorgina

Answer 4

I would use jQuery's .one() function. This attaches a handler that will only fire once.

Modified 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

Unscratched

Answer 5

save it in a variable:

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);
}
});

Topmost

this wouldn't work. The .click is a bind, so it'll happen everytime. you need to put the flag check inside the click function – Dodge

Answer 6

Use unbind in your function to remove all events

$(this).unbind();

From jQuery 1.7 .off is the recommended way

$(this).off();

Unexceptional