jQuery prevent firing twice click logic inside the function

Question

I'm trying to wrap the logic inside the function so that I can apply the same function across the whole project.

This works below:

$(selector).on('click', function(){
   var hasBeenCliked = $(this).attr("has-been-clicked");
   if (hasBeenCliked === "yes") {
       return;
   }
   $(this).attr("has-been-clicked", "yes");

  //do some stuff once
});

Now, when I create a function something like this:

function preventTwiceClick(item){
        var hasBeenCliked = $(this).attr("has-been-clicked");
       if (hasBeenCliked === "yes") {
           return;
       }
       $(this).attr("has-been-clicked", "yes");
    }

and then reuse it in multiple times on any click function like this, it doesn't work and it is still firing twice:

$(selector1).on('click', function(){
    preventTwiceClick(this);
    //do some stuff
});

$(selector2).on('click', function(){
    preventTwiceClick(this);
    //do some stuff
});

$(selector3).on('click', function(){
    preventTwiceClick(this);
    //do some stuff
});

Many thanks for your help

EDIT I did what you suggested guys, but it is not working. Here's the example: FIDDLE

try changing your paramter of "preventTwiceClick" to "$(this)" and replace $(this) inside your function to "item" (the parameter) — empiric
– empiric, Commented Nov 7, 2014 at 11:00

Dimag Kharab · Accepted Answer · 2014-11-07 11:39:41Z

2

You doing wrong here ,

Try using like this

function preventTwiceClick(this){

       if ($(this).attr("has-been-clicked") === "yes") {
           return;
       }
       $(this).attr("has-been-clicked", "yes");
    }

Because var hasBeenCliked is being overwritten

EDIT : Else you can use .one as @george suggested

EDIT 2 :

$('#working-test').on('click', function(){
   var hasBeenCliked = $(this).attr("has-been-clicked");
   if (hasBeenCliked === "yes") {
       return;
   }
   $(this).attr("has-been-clicked", "yes");

  alert('once');
});


function preventTwiceClick(ele){
    console.log($(ele).attr("has-been-clicked"));
       if ($(ele).attr("has-been-clicked") == "yes") {
           return true;
       }else{
           $(ele).attr("has-been-clicked", "yes");
           return false;
       }

    }

$('#not-working-test').on('click', function(){
    if(!preventTwiceClick(this)){
       alert('first time'); 
        //do your stuff here
    }
});

edited Nov 7, 2014 at 11:39

answered Nov 7, 2014 at 11:03

Dimag Kharab

4,5391 gold badge27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

angular_learner Over a year ago

Check my Fiddle in Edit

vborutenko · Accepted Answer · 2014-11-07 11:02:06Z

0

At first you can use One()

At second in preventTwiceClick you pass item,but noy use it,fix it to

function preventTwiceClick(item){
    var hasBeenCliked = $(item).attr("has-been-clicked");
   if (hasBeenCliked === "yes") {
       return;
   }
   $(item).attr("has-been-clicked", "yes");
}

answered Nov 7, 2014 at 11:02

vborutenko

4,4535 gold badges32 silver badges50 bronze badges

4 Comments

George Over a year ago

If you are to attach custom data to an element, use .data().

vborutenko Over a year ago

How you can see this is not my code,using .data() - better solution,but with attr() code also will work

empiric Over a year ago

note that you can't mix .data() and .attr(). e.g. you can't use .attr('click', 'yes') and .data('click') for getting the value of this attribute. Just want that leave here ;-)

angular_learner Over a year ago

Check my Fiddle in Edit

LiamHT · Accepted Answer · 2014-11-07 11:04:25Z

apply the same function across the whole project

Does this mean that you want it to apply across your whole website? if so, you'd probably be best using cookies. you can do this in javascript with something like this.

document.cookie = "elementHasBeenClicked = true"

then inside your event youd have to check your cookie with

getCookie("elementHasBeenClicked")

if you were using a custom cookie checker.

function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length,c.length); } return ""; }

If you want it to be on a per page basis, then a simple data attribute on your item should be fine - see data attributes here http://ejohn.org/blog/html-5-data-attributes/

Collectives™ on Stack Overflow

jQuery prevent firing twice click logic inside the function

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related