firing the second .click function

Question

I think this is very newbie question but is it possible to have 2 separate function on a .click on 1st and 2nd click?

$(div).click(function(){
    alert("1st click");
},
function(){
    alert("2nd click");
});

http://jsfiddle.net/2xe8a/

Or is there any suggestion that would separate that function?

Thanks guys!

Answer 1

Sure, just set something when clicked the first time and check it the second time

$('div').click(function(){
    var clicked = $(this).data('clicked');

    if ( clicked ) {
        alert('the rest of the time');
    }else{
        alert('first time');
    }

    $(this).data('clicked', !clicked);
});

FIDDLE

Answer 2

One way would be to unbind on the first click:

function click1 () {
    alert('1st click');
    $(this).off('click', click1).on('click', click2);
}
function click2 () {
    alert('2nd click');
}

$(function () {
    $('#click').on('click', click1);
});

Updated JSFiddle: http://jsfiddle.net/2xe8a/1/

Another option would be to use a wrapper method to determine which method is supposed to fire:

function click1 () {
    alert('1st click');
}
function click2 () {
    alert('2nd click');
}

$(function () {
    $('#click').data('clicks', 0).on('click', function () {
        var $this = $(this),
            clicks = $this.data('clicks') + 1;
        switch (clicks) {
            case 1: click1.call(this); break;
            case 2: click2.call(this); break;
        }
        $this.data('clicks', clicks);
    });
});

Updated JSFiddle: http://jsfiddle.net/2xe8a/6/

Edit: As per Juhana's suggestion, a 3rd option might look like this:

function click2 () {
    alert('2nd click');
}

$(function () {
    $('#click').one('click', function () {
        alert('1st click');
        $(this).one('click', click2);
    });
});

JSFiddle Link: http://jsfiddle.net/2xe8a/8/

Answer 3

If you only want each function to happen once, you can use one instead of on (and, I always use something like on('click') instead of the shortcut click() method):

$("#click").one('click', function(){
  alert("1st click");
  $("#click").one('click', function(){
    alert("2nd click");
  });
});

If you need a little more control over which one fires, you can use on and then off to unbind the event handlers:

$("#click").on('click', function(){
  alert("1st click");
  $("#click").off('click');
  $("#click").on('click', function(){
    alert("2nd click");
    $("#click").off('click');
  });
});

If you want to do it with variables, you could do:

var firstClick = true;
$("#click").on('click', function(){
  if (firstClick) {
     alert("1st click");
     firstClick = false;
  }
  else {
    alert("2nd click");
  }
});

Answer 4

I am unsure of what exactly you are trying to do.

If you are trying to have the 2nd function execute every 2nd click (ie even number of clicks), and execute the 1st function on the odd number of clicks, then why not use a counter?

This is a very simple example but I think it illustrates the principle:

var count = 0;
$("#click").click(function(){
    if (count % 2 === 0) {
        oddNumberOfClicks();
    }
    else {
        evenNumberOfClicks();
    }

    count++;
});

function oddNumberOfClicks() {
    alert('Doing some work for odd');
}

function evenNumberOfClicks() {
    alert('Doing some work for even');
}

http://jsfiddle.net/2xe8a/4/

Answer 5

(function(){
    var count = 0;

    $("#click").click(function(e){
        if(count % 2 == 0){
            count++;
            alert(1);
            // first click
        }else{
            count++;
            alert(2);
            // second click
        }
    });
});

Using a count er.

FIDDLE

PS This thing can be done without jQuery. http://youmightnotneedjquery.com/

Answer 6

Simple way:

var t = false;
$("#click").click(
    function(){
        if(!t){
            alert("1st click");
            t = true;
        } else {
            alert("2st click");
        }
      }
);

Fiddle:

http://jsfiddle.net/2xe8a/9/

Answer 7

Using an incrementing variable?

clicks = 0;
$(div).click(function(){

  clicks = clicks +1; // clicks++
  if ( clicks == 1 ) {
    alert("1st click");
  } else if ( clicks == 2 ) {
    alert("2nd click");
  } else {
     //...
  }
});

Answer 8

By 2nd click do you mean a double click? If so, there is a double click method in jQuery:

$(div).dblclick( function() {
    alert("asdf");
});