CODEWITHSUNDEEP
javascriptjquery
Van-Sama
Van-Sama

Reputation: 1264

Javascript click events firing multiple times?

Why is my function running multiple times? 

var s,
getData = {

    settings: {
        gender: $("input[name='gender']"),
        age: $("input[name='age']")
    },

    init: function() {
        s = this.settings;
        this.getInput();
    },

    getInput: function() {
        for (i in s) {
            s[i].on("click", function() {
                s[i].off();
                console.log(this.getAttribute('value'))
            });
        }
    },
};

What I find odd is that when I don't click the same input twice it only runs once. For instance if I click 'male' and then 'female' it would show in the console 

(1) male
(2) female

which logically makes sense to me, if I clicked 'male' 5 times then I get

(14) male

and it just gets larger and larger.

EDIT: JSFiddle If you open console you can see what happens

Upvotes: 2

Views: 6772

Answers (4)

Azad
Azad

Reputation: 5264

you are adding multiple click events to same element that why you get multiple console.log for one click. To resolve this just add a condition before assigning event listners.

var s,
    getData = {

      cacheDOM: {
        gender: $("input[name='gender']"),
        age: $("input[name='age']")
      },

      init: function() {
        if(!s){
            s = this.cacheDOM;
            this.getInput();
        }
      },

      getInput: function() {
        for (i in s) {
          s[i].on("click", function() {
            s[i].off();
            console.log(this.getAttribute('value'))
          });
        }
      },
    };

Upvotes: 0

passion
passion

Reputation: 1360

I don't know why you want do it like this , as you code , I think there is a error here .

for (i in s) {
  s[i].on("click", function() {
      s[i].off();
      console.log(this.getAttribute('value'))
   });
}

You declare i as global , when event fires , i refers the same value .You can try this : 

for (let i in s) {
      s[i].on("click", function() {
          s[i].off();
          console.log(this.getAttribute('value'))
       });
    }

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

bind a single click event, if you are calling this multiple time then first remove the click event and the append it once again or use one()

try the following:

var s,
getData = {

    settings: {
        gender: "input[name='gender']",
        age: "input[name='age']"
    },

    init: function() {
        s = this.settings;
        this.getInput();
    },

    getInput: function() {

            $(s.gender+','+s.age).on("click", function() {
                console.log($(this).val());
            });
    },
};

remove the click event and initiate the call at document ready

see demo: https://jsfiddle.net/qzrfwc3g/

or do it the normal way 3 lines of code: 

$("input[name='gender'],input[name='age']").on("click", function() {
     console.log($(this).val());
});

Upvotes: 2

Ryan
Ryan

Reputation: 14649

What's happening is that getInput is being called for each click event, meaning that the loop is running each time, registering the event again. So each time you click the radio button the loop will attach an event to the DOM element again. You should only register the event once: https://jsfiddle.net/2jbLdo9n/

Remove the onclick event on the input:

<div class="right-item">
  <input id="male" type="radio" name="gender" value="male">
  <label class="left-m" for="male"><span></span> Male </label>
</div>
<div class="right-item">
  <input id="female" type="radio" name="gender" value="female">
  <label for="female"><span></span> Female </label>
</div>

Then in your JavaScript, just call getData.init();

getData.init();

Upvotes: 3

Related Questions