CODEWITHSUNDEEP
jquery
angular_learner
angular_learner

Reputation: 671

jQuery prevent firing twice click logic inside the function

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

Upvotes: 0

Views: 57

Answers (3)

Dimag Kharab
Dimag Kharab

Reputation: 4519

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

Upvotes: 2

LiamHT
LiamHT

Reputation: 1332

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/

Upvotes: 0

vborutenko
vborutenko

Reputation: 4443

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

Upvotes: 0

Related Questions