今天在编写前台页面的时候，需要实现这样一个简单的功能：table动态新增tr，然后绑定新增tr子节点元素(input button) 的 onlcick 事件
说明：点击新增，新增一行，所有值为1的按钮通过jquery绑定click事件，值为的按钮通过js绑定cilck事件
html代码如下：
1 <table id="table1"> 2 <tr> 3 <th>1</th> 4 <th>2</th> 5 <th><input type="button" id="btn_AddNewRow" value="新增"/></th> 6 </tr> 7 <tr> 8 <td><input type="button" class="btn_Class1" value="1"/></td> 9 <td><input type="button" value="2"/></td> 10 <td><input type="button" onclick="deltr(this)" value="删除"/></td> 11 </tr> 12 </table>
js部分代码：
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 4 $(".btn_Class1").click(function () { 5 alert("hello the world!"); 6 }); 7 //新增一行 8 $("#btn_AddNewRow").click(function () { 9 var html1 = ‘<td><input type="button" class="btn_Class1" value="1"/></td>‘; 10 var html2 = ‘<td><input type="button" value="2" onclick="SayHello()"/></td>‘; 11 var html3 = ‘<td><input type="button" onclick="deltr(this)" value="删除"/></td>‘; 12 $("#table1>tbody").append(‘<tr>‘ + html1 + html2 + html3 + ‘</tr>‘); 13 }); 14 }); 15 //删除行 16 function deltr(delbtn) { 17 $(delbtn).parents("tr").remove(); 18 } 19 function SayHello() { 20 alert("hello the world!"); 21 } 22 </script>
这种情况下，js绑定的click事件能够正常触发，但是jq通过类选择器绑定的事件则不能正常触发.(点击1没有反应，点击2能够正常弹出)
修改后的js代码如下：(通过jq bind 事件动态绑定通过class类选择器获得的元素的click事件)
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 4 /* $(".btn_Class1").click(function () { 5 alert("hello the world!"); 6 });*/ 7 //新增一行 8 $("#btn_AddNewRow").click(function () { 9 var html1 = ‘<td><input type="button" class="btn_Class1" value="1"/></td>‘; 10 var html2 = ‘<td><input type="button" value="2" onclick="SayHello()"/></td>‘; 11 var html3 = ‘<td><input type="button" onclick="deltr(this)" value="删除"/></td>‘; 12 $("#table1>tbody").append(‘<tr>‘ + html1 + html2 + html3 + ‘</tr>‘); 13 14 //通过bind事件绑定click事件 15 $(".btn_Class1").bind("click", function () { 16 alert("hello the world!"); 17 }); 18 }); 19 }); 20 //删除行 21 function deltr(delbtn) { 22 $(delbtn).parents("tr").remove(); 23 } 24 function SayHello() { 25 alert("hello the world!"); 26 } 27 </script>
这样就能够正常触发了。不解(学习笔记。)
2015-03-31 22:02
asas
原文：http://www.cnblogs.com/wawa0210/p/4382091.html
