Can't apply event in an element created by innerHTML

Question

Hello guys I'm having problem with my page at the moment. I have a function that will add row and cells in a table on every click of a button.

CODE:

<script type="text/javascript">
$(document).ready(function(){
  $(".prod_add").click(function (){
     var table = window.parent.document.getElementById("prod_order_tbl");
     var row= this.parentNode.parentNode;
     var row = table.insertRow(-1);
     var cell1 = row.insertCell(0);
     var cell2 = row.insertCell(1);
     var cell3 = row.insertCell(2);
     var name=$("#"+this.id+"_name").val();
     cell1.innerHTML = this.id;
     cell2.innerHTML = name;
     cell3.innerHTML = 2+"<input type='button' value='x' id='"+row.rowIndex+"'      
     class='remove_prod'>";
  });

  $(".remove_prod").click(function (){
     alert("test");
  });
});
</script>

As you can see, in cell3 I have placed an input button with a class, in which everytime that button is clicked an alert message will appear. But somehow I can't get it to work. Any help would be much appreciated.

Answer 1

For dynamically created elements use .on() to bind event

$("#prod_order_tbl").on("click",".remove_prod",function (){
   var index = $(this).closest('tr').index();
   alert("test "+index);// gives you index of the parent tr of button clicked.
});