jQuery对象绑定事件
jsp页面中<script>标签中的jQuery代码块$(function(){//代码});是在页面加载完毕后读取执行的，若在次代码中定义绑定后来增加的对象会无效，因为执行绑定代码时该对象并不存在。如下例子：
页面加载时有两个table，第一个table只有标题行没有数据行，通过点击第二个table的按钮实现数据行的增删。
1 <table > 2 <tr> 3 <td><input type="checkbox" id="oper" /></td> 4 <td>操作</td> 5 <td>添加文件</td> 6 </tr> 7 </table> 8 <table id="btnTbl"> 9 <tr > 10 <td><input type="button" id="addBtn" value="添加行" /></td> 11 <td><input type="button" id="delBtn" 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[id='oper']").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~
