javascript - Jquery appended buttons on click with classes - Stack Overflow

admin管理员组

文章数量:1344961

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

Share Improve this question Follow asked Apr 27, 2017 at 9:09 B.TB.T 55111 gold badge88 silver badges2929 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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

本文标签： javascriptJquery appended buttons on click with classesStack Overflow