CODEWITHSUNDEEP
javascriptjquery
user7849384
user7849384

Reputation:

After clicking. A function is called multiple times ... Why?

Okay friends. I need your thought here. The code has two simple actions. The first action adds ADD after the click. Second action Click X with any number. Now that a second action is called. The code should only be printed once! What a worker does not read has a call of several times! Can anyone explain why?

I took the same code .... with another HTML code with 3 DIV that already exist. And the code works fine.

var count = 1;
$(document).ready(function() {
  $("#add").on("click", function() {
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>');
    count++;

    $(".btn_x").on("click", function() {
      console.log($(this).html());
    })
  })
})
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button id="add">Add</button>
<div id="items"></div>

Upvotes: 1

Views: 57

Answers (4)

Abdur Rehman
Abdur Rehman

Reputation: 11

There is a double call in case of #add or #item. Your listener function call both of them.when you want to call only one. Must check your code again. I hope you got my point.

Upvotes: 0

nicokant
nicokant

Reputation: 493

I'm not sure about what you are asking, but this may be helpful.

var count = 1;
$(document).ready(function() {
  $("#add").on("click", function() {
    $("#items").empty().append('<div><input/><button class="btn_x">X' + count + '</button></div></br>');
    count++;
  })
  $(".btn_x").on("click", function() {
    console.log($(this).html());
  })
})
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button id="add">Add</button>
<div id="items"></div>

Upvotes: 0

Mike Cluck
Mike Cluck

Reputation: 32511

The problem is that you're adding a new event listener every time you click #add. Instead, you could just listen to events on the parent element and capture elements from the child elements. 

var count = 1;
$(document).ready(function() {
  $("#add").on("click", function() {
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>');
    count++;
  });
  
  // Listen to events on the parent element
  $("#items")
    // But only capture events from child elements with .btn_x
    .on("click", ".btn_x", function() {
      console.log($(this).html());
    });
});
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button id="add">Add</button>
<div id="items"></div>

You can think of it this way: every time an event happens on a .btn_x, it's going to tell #items about it. Whenever #items hears about it, it lets you handle the event just like if you were listening to .btn_x directly.

The problem with your approach was every time you clicked #add you were saying "every single one of you .btn_x's! Here's a new event handler for you!".

Upvotes: 2

taylorc93
taylorc93

Reputation: 3716

You're creating a listener for every btn_x item instead of adding a listener to only the newly created item. Try changing the classname to something like btn_1, btn_2, etc:

var count = 1;
$(document).ready(function() {
  $("#add").on("click", function() {
    var buttonClass = ".btn_" + count;
    $("#items").append('<div><input/><button class="' + buttonClass + '">X' + count + '</button></div></br>');
    count++;

    $(buttonClass).on("click", function() {
      console.log($(this).html());
    })
  })
})

Upvotes: 0

Related Questions