I have a problem I noticed many times but still haven't understood the real reason.

I have a script that append some .btn buttons by clicking the button #add.

Of course the .btn buttons are to be clicked. So I made an event after the append():

$(".btn").on('click', function(){

    alert('clicked');

});

This function works as I want. When I create a button and click on it, it will alert me. But the problem es when I create more than one button and that I click on one of them. It will pop up an alert for the button I clicked, and for each button with the class that es after it in the source code. (As an example, if I create 3 buttons, if I click the first it will alert three times. If I click the second it will alert two times, and if I click the last, it will alert one time.)

I assume that it must be about some Javascript notions I haven't well understood yet. Probably a problem with the class ? I'm a bit lost.

Here is an example if you want to see by yourself : /

Thank you in advance !

I have a problem I noticed many times but still haven't understood the real reason.

I have a script that append some .btn buttons by clicking the button #add.

Of course the .btn buttons are to be clicked. So I made an event after the append():

$(".btn").on('click', function(){

    alert('clicked');

});

This function works as I want. When I create a button and click on it, it will alert me. But the problem es when I create more than one button and that I click on one of them. It will pop up an alert for the button I clicked, and for each button with the class that es after it in the source code. (As an example, if I create 3 buttons, if I click the first it will alert three times. If I click the second it will alert two times, and if I click the last, it will alert one time.)

I assume that it must be about some Javascript notions I haven't well understood yet. Probably a problem with the class ? I'm a bit lost.

Here is an example if you want to see by yourself : https://jsfiddle/nmza0ae4/

Thank you in advance !

• javascript
• jquery
• html
• class
• button

6 Answers 6

Try this : when you add click handler to button user $(".btn").on('click'.. it will add to only available buttons at that point of time. To add click handler to dynamically added buttons, use below code

$(document).on('click',".btn", function(){
    alert('clicked');
});

$('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');
    $(".btn").on('click', function(){

    alert('clicked');

    });
  });

What you are doing is adding event handler on each click. When new button is added, new event handler is attached to button and hence multiple alert.Put event handler outside the scope

$('#add').click(function(){
  $('html').append('<button class="btn">Test</button>');  
});
$(document).on('click',".btn", function(){
 alert('clicked');
});

You can use $(document).on('click' function ...

$(document).ready(function(){

	$('#add').click(function(){
  	$('html').append('<button class="btn">Test</button>');  	
  });
});


    $(document).on('click',".btn", function(){

  	alert('clicked');

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">
Add
</button>

As the Add button adds to dom you will need event delegation. Code for adding the button tag looks fine.

$(document).ready(function(){

    $('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');

  });
});

$(document).on("click",'.btn', function(){
alert('clicked');
});

You can unbind the event before binding the event like this.

$('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');
    $(".btn").off("click");
    $(".btn").on("click",function(){
        alert('clicked');
    })
});

or you can globally write the click event for all the dynamically added button like

$('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');
  });
$(document).on('click',".btn",function(){
   alert('clicked');
});

But the standard way is the 2nd one. https://jsfiddle/Rishi0405/nmza0ae4/2/

try this:

$(document).ready(function(){

 $('#add').click(function(){
   $('html').append('<button class="btn">Test</button>');
 });
 $(document).on('click',".btn", function(){
   alert('clicked');
 });
});