How to stop function propagation after first click with jQuery

Question

I have some click function... whole action is fine but if i fastly doubleclick at call button some elements generates two times. Can you tell me how to stop function propagation after first click? Much thx for help, and this is my code:

$('#start_panel ul li').click(function(event){
    if($(this).hasClass('eng')){
       ...
    }
    else if($(this).hasClass('ger')){
       ...
    }
    else if($(this).hasClass('pln')){
       ...
    }
    event.stopPropagation();
});

If not .one() pass closure to click that maintains the nr of clicks — Ja͢ck, Sep 04 '12 at 11:57
If you use `on()` to bind the click, you can also use `off()` to unbind it until the function completes. — adeneo, Sep 04 '12 at 12:01

Denys Séguret · Accepted Answer · 2012-09-04T12:10:21.947

3

var clicked = false;
$('#start_panel ul li').click(function(event){
   if (clicked) return;
   clicked = true;

Or use the one function (slightly different : now only one click per li element will be handled) :

 $('#start_panel ul li').one('click', function(event){

edited Sep 04 '12 at 12:10

answered Sep 04 '12 at 11:56

Denys Séguret

372,613
87
782
758

1

+1 finally an answer that actually addresses the problem properly. – Ja͢ck Sep 04 '12 at 12:04
the `.one()` option helps. but if i have a `.live('click',...` ? – Lukas Sep 04 '12 at 12:04
@Jack "finally" ? This was the first answer. – Denys Séguret Sep 04 '12 at 12:05
@dystroy couldn't tell because the answers of same score are not sorted on anything :) – Ja͢ck Sep 04 '12 at 12:06
@ŁukaszBorawski What's your version of jquery ? – Denys Séguret Sep 04 '12 at 12:07
i have the new'st version - 1.7.2 – Lukas Sep 04 '12 at 12:08

score 0 · Answer 2 · answered Sep 04 '12 at 11:57

Try this instead:

var myClicker = function(event){
    var self = event.currentTarget;
    if($(self).hasClass('eng')){
       ...
    }
    else if($(self).hasClass('ger')){
       ...
    }
    else if($(self).hasClass('pln')){
       ...
    }
    $(self).one('click', myClicker);
});
$('#start_panel ul li').one('click', myClicker);

score 0 · Answer 3 · answered Sep 04 '12 at 11:58

0

 var i=0;
$('#start_panel ul li').click(function(event){
 if(i==1){
  i=0;
 return false;
  }
if($(this).hasClass('eng')){
   ...
}
else if($(this).hasClass('ger')){
   ...
}
else if($(this).hasClass('pln')){
   ...
}
 i++;


 });

answered Sep 04 '12 at 11:58

Sora

2,465
18
73
146

score 0 · Answer 4 · answered Sep 04 '12 at 11:59

0

To clear previous request use Stop(true,true)

$('#start_panel ul li').stop(true,true).click(function(event){
    if($(this).hasClass('eng')){
        ...
    }
    else if($(this).hasClass('ger')){
       ...
    }
    else if($(this).hasClass('pln')){
       ...
    }
    event.stopPropagation();
});

answered Sep 04 '12 at 11:59

GajendraSinghParihar

9,051
11
36
64

Are you sure stop() is'nt really for the $.fx animation queue ? – adeneo Sep 04 '12 at 12:00

score 0 · Answer 5 · answered Sep 04 '12 at 12:02

You can unbind the click event after the first click:

$('#start_panel ul li').click(function(event){
    $(this).unbind('click'); 
    if($(this).hasClass('eng')){
       ...
    }
    else if($(this).hasClass('ger')){
       ...
    }
    else if($(this).hasClass('pln')){
       ...
    }
    event.stopPropagation();
});

How to stop function propagation after first click with jQuery

5 Answers5