Click Event Does Not Work When Dynamically Adding a Column in Javascript

Question

I am dynamically adding a column via jquery:

$('#id_orderTable tr:last').after('<tr><td>' +  orderLine.short_desc + '</td><td><input type="button" value="-" class="qtyminus"></input></td><td>'

I have a listener for "qytminus"

 $('.qtyminus').click(function(e) { ... some code...}

If I just write the code on a predefined table, the onclick triggers just fine and ...some code... is executed. However when I click on the button when I add the row dynamically, the onclick does not get invoked. Is this even possible with dynamic content additon?

Answer 1

Since you are generating HTML dynamically with jQuery ,use event delegation as shown :-

$('#id_orderTable').on('click','.qtyminus',function() { ... some code...});