CODEWITHSUNDEEP
javascriptjqueryhtmlclassbutton
B.T
B.T

Reputation: 551

Jquery appended buttons on click with classes

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 comes 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 comes 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.net/nmza0ae4/

Thank you in advance !

Upvotes: 1

Views: 9272

Answers (6)

Rishi0405
Rishi0405

Reputation: 354

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.net/Rishi0405/nmza0ae4/2/

Upvotes: 1

Vipul Dhandhresha
Vipul Dhandhresha

Reputation: 54

try this:

$(document).ready(function(){

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

Upvotes: 0

Ishank
Ishank

Reputation: 2926

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

Upvotes: 1

Super User
Super User

Reputation: 9642

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">
Add
</button>

Upvotes: 1

Anmol Mittal
Anmol Mittal

Reputation: 853

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

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 5

Related Questions