CODEWITHSUNDEEP
javascriptjqueryfunctionclick
Clenn
Clenn

Reputation: 29

firing the second .click function

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!

Upvotes: 2

Views: 1820

Answers (8)

adeneo
adeneo

Reputation: 318342

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

Upvotes: 3

hlscalon
hlscalon

Reputation: 7552

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/

Upvotes: 0

Gaurang Tandon
Gaurang Tandon

Reputation: 6781

(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 counter.

FIDDLE

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

Upvotes: 0

user2897448
user2897448

Reputation:

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 {
     //...
  }
});

Upvotes: 0

Gautham C.
Gautham C.

Reputation: 1202

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

If you are trying to have the 2nd function execute every 2nd click (i.e 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/

Upvotes: 1

dave
dave

Reputation: 64715

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

Upvotes: 1

Robert Messerle
Robert Messerle

Reputation: 3032

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/

Upvotes: 1

Connor
Connor

Reputation: 81

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

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

Upvotes: -1

Related Questions