jQuery对象绑定事件

jsp页面中<script>标签中的jQuery代码块$(function(){//代码});是在页面加载完毕后读取执行的，若在次代码中定义绑定后来增加的对象会无效，因为执行绑定代码时该对象并不存在。如下例子：

页面加载时有两个table，第一个table只有标题行没有数据行，通过点击第二个table的按钮实现数据行的增删。

 1 <table >
 2             <tr>
 3                 <td><input type="checkbox"  /></td>
 4                 <td>操作</td>
 5                 <td>添加文件</td>
 6             </tr>    
 7         </table>
 8         <table >
 9             <tr >
10                 <td><input type="button"  value="添加行" /></td>
11                 <td><input type="button"  value="删除行" /></td>
12             </tr>
13         </table>

插入行的代码：

 1 　　　　　　　　　　var i = 1;
 2                 $("#addBtn").click(
 3                     function(){
 4                         //创建一个tr对象
 5                         var $tr = $("<tr></tr>");
 6                         //创建三个td对象
 7                         var $td1 = $("<td></td>");
 8                         var $td2 = $("<td></td>");
 9                         var $td3 = $("<td></td>");
10                         //填充这三个td对象
11                         $td1.append("<input type='checkbox' name='ck' />");
12                         $td2.append(i ++);
13                         $td3.append("<input type='file' name='file_" +i+ "' />");
14                         //将三个td对象添加到tr对象中
15                         $tr.append($td1);
16                         $tr.append($td2);
17                         $tr.append($td3);
18                         //将tr对象添加到数据表格中
19                         $("table:first").append($tr);

此时若尝试通过如下方式给name='ck'的checkbox添加click事件监听，实现全选后有任何一个数据行checkbox未选中时标题行checkbox自动由选中状态变成未选中状态是无法实现的：

1 $("input[name='ck']").bind("click",
2                     function () {
3                         var checkedCkNum = $("input[name='ck']:checked").length;
4                         var ckNum = $("input[name='ck']").length;
5                         //设置标题行checkbox的checked属性在数据行checkbox全选中时选中否则非选中
6                         $("input[]").attr("checked",checkedCkNum == ckNum);
7                     }    
8                 );

//****在页面加载完成时读取jQuery代码，此时还没有 ck 对象 所以未绑定成功

//需要在每次创建 ck 的时候手动绑定click事件

解决方案如下：

1 //自定义函数给标题行checkbox的checked属性赋值
2                 $.ck = function () {
3                     var checkedCkNum = $("input[name='ck']:checked").length;
4                     var ckNum = $("input[name='ck']").length;
5                     $("#oper").attr("checked",checkedCkNum == ckNum);
6                 };

在添加行时为添加的checkbox的click事件绑定此函数，更改后的td1填充代码如下

1 　　　　　　　　　$ch = $("<input type='checkbox' name='ck' />");
2                $ch.click($.ck);//将定义好的函数绑定到该checkbox的click事件
3                $td1.append($ch);

好啦，晚安各位O(∩_∩)O~