Dynamically adding a button using jquery

Question

I've got an mvc app in .net that i'm trying to dynamically add buttons. Below is a sample of the jquery i'm using. It's a fairly long sequence of html that's appended but it works and those buttons are added. But when the buttons click they don't seem to activate a click event handler that i've got.

$('#imageCont').append('<div class="row tier" id="tier'+ tierIdCount +'"  ><hr/><h3>Tier</h3><button type="button" class="btn btn-default addPerson">Add Person</button><button type="button" class="btn btn-default removePerson">Remove Person</button></div>');

Thanks.

Mantas Čekanauskas · Accepted Answer · 2017-03-30 19:41:32Z

2

I imagine you have event handler with jQuery like this:

$('.removePerson').on('click', 
   function(e){
       //do some stuff
   });

And if you changed this first line with

$(document).on('click', '.removePerson',
   function(e){
       //do some stuff
   });

everything should start working as you expect. Dynamically added html elements have to use delegated events, because listeners are attached to elements which are already present in DOM

answered Mar 30, 2017 at 19:41

Mantas Čekanauskas

2,2386 gold badges26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding a button using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related