js与jquery cilick 事件疑惑

浏览数：42 / 时间：2015年06月09日

　　今天在编写前台页面的时候，需要实现这样一个简单的功能：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>

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>