Disable a function on an old buttons

Question

in my project i want to add programmatically certain elements buttons ,because every time a new button is added , The call is doubled to the same function for the oldbutton.

var btnElem ='<button type="button"class="doSomething">Button</button><br>';


function ActiveFunc(){
  $('.doSomething').on('click',function(){  
    alert('Clicked');
  });
}

$('#Add_Btn').on('click',function(){  
  $('#div_').append(btnElem);
  ActiveFunc();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>

I want to disable this repeated call to the function , I want to make all the buttons call the function only once , any idea ?

nb: the direct delaration of function is not working for the buttons added programmatically.

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, May 30 '18 at 14:50

score 2 · Accepted Answer · answered May 30 '18 at 14:48

This is because you add the event listener every time you add the button.

I would advice 1 event listener for this like so:

var btnElem = '<button type="button"class="doSomething">Button</button><br>';

$('body').on('click', '.doSomething', function() {
  alert('Clicked');
});

$('#Add_Btn').on('click', function() {
  $('#div_').append(btnElem);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>

Alice Yu · Answer 2 · 2018-05-30T20:49:52.130

0

You are adding the function to every element with the .doSomething class. Try something like this instead:

$('#Add_Btn').on('click',function(){ 
  btnElem.on('click', function() {
    //blah blah
  }); 
  var newButton = $('#div_').append(btnElem);
})

edited May 30 '18 at 20:49

answered May 30 '18 at 14:47

Alice Yu

176
1
8

`$('#div_').append(btnElem);` will return the `$('#div_')` into the variable, so this logic will duplicate bind on that element. – Taplar May 30 '18 at 14:49
@Taplar You're completely right - I wrote this too fast! Thanks for the heads up :) Hopefully I've fixed it. – Alice Yu May 30 '18 at 20:54
`btnElem` is a string. Can't bind on a string, :) – Taplar May 30 '18 at 20:55

hodgef · Answer 3 · 2018-05-30T14:56:30.570

Why not just add a button element with the class? No need to attach an event every time. Here's the solution, using ES6 syntax.

let btnElem = '<button class="doSomething">Click me</button>';

$(document).on("click", ".doSomething", () => {
  alert("Do something");
});

$(document).on("click", "#addBtn", () => {
  $('#div_').append(btnElem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="addBtn">AddBtn</button><br>
<div id="div_"></div>

score 0 · Answer 4 · answered May 30 '18 at 14:51

Alice Yu is correct, but I would take a different approach and add onclick on the button and use that to call the function like so:

<button type="button" onclick="addButtonFunction();" id="Add_Btn">AddBtn</button>

and do the same on the dynamically added button

score 0 · Answer 5 · answered May 30 '18 at 14:58

Event Listeners are attached on a one off basis to a specific element. Which is why you are having multiple events...

var btnElem ='<button type="button"class="doSomething">Button</button><br>';


function ActiveFunc(){
  $('.doSomething').on('click',function(){  //this function is attaching an event listener to all elements with a class of doSomething.
  //event listeners are attached on an element basis despite your jquery selector targeting a class name
  //so on the third activation the first button now has 3 listeners, the second now has 2 listeners and the third one
    alert('Clicked');
  });
}

$('#Add_Btn').on('click',function(){  
  $('#div_').append(btnElem);
  ActiveFunc();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>

instead, try binding the events to the element at creation time

function createNewDoSomething(){
  var btn = document.createElement('button');
  btn.classList.add('doSomething');
  btn.innerText = "Button";
  return btn;
}

function ActiveFunc(){
    alert('Clicked');
}

$('#Add_Btn').on('click',function(){  
  var btn = createNewDoSomething();
  btn.addEventListener('click', ActiveFunc);//$(btn).click(ActiveFunc)
  $('#div_').append(btn);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>

Disable a function on an old buttons

5 Answers5