无法在innerHTML创建的元素中应用事件

时间:2014-08-21 05:23:57

标签: jquery dom javassist

大家好我此刻我的网页有问题。我有一个函数,它会在每次单击按钮时在表格中添加行和单元格。

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>

正如你所看到的,在cell3中我放置了一个带有类的输入按钮,每次单击该按钮时都会出现一条警告消息。但不知怎的,我无法让它发挥作用。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

对于动态创建的元素,使用.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.
});