Невозможно применить событие в элементе, созданном innerHTML

Question

Привет, ребята, у меня проблема с моей страницей на данный момент. У меня есть функция, которая будет добавлять строки и ячейки в таблицу при каждом нажатии кнопки.

КОД:

<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> 

Как вы можете видеть, в CELL3 я поместил кнопку ввода с классом, в котором каждый раз, что кнопка нажата предупреждающее сообщение появится. Но почему-то я не могу заставить его работать. Любая помощь приветствуется.

Answer 1

Для динамически создаваемых элементов используют .on() связать событие

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