因为对JQUERY和JS的动态绑定事件的不熟悉,今天花了好久的时间才把动态绑定和删除onclick事件搞定!现在分享下我的过程。
在我的查询页面,我将我的onclick事件绑定到了tr标签上同时传入当前行(this值)参数,这样可以在点击行上的任意地方时可以选中checkbox,但是在我的某一列上也有一个onclick事件是用于下载附件的,当我点击附件下载时当然不能把该行的checkbox选中,还出现的一个情况是由于在tr标签上绑定了onclick事件,在直接选择checkbox时不能一次点击选中该checkbox,需要双击才可以,因此在这两种情况中我又在checkbox列和附件下载列添加了onmouseout和onmouseover事件,同时传入该列(this值)参数,用于动态将标签tr上的事件重新绑定和删除。
部分代码示例如下:
绑定在tr上的事件
<tr onclick="chooseCheckBox1(this);">
在checkbox列的事件,附件下载列一样
<td width="2%">
<input type="checkbox" onmouseout="addOnClick(this)" onmouseover="moveOnClick(this)" name="temp1">
</td>
function chooseCheckBox1(line){
var row;
//用于判断是否已经经过onmouseout和onmouseover来动态绑定事件
if(line.data == undefined){
row = line;
}else{
row = line.data.row1[0];
}
if($(row).children().find("[name$=temp1]").attr("checked") == undefined){
$(row).children().find("[name$=temp1]").attr("checked",true);
}else{
$(row).children().find("[name$=temp1]").attr("checked",false);
}
}
function moveOnClick(line){
//第一次鼠标经过checkbox或附件下载列时删除事件
$(line).parent().parent().removeAttr("onclick",chooseCheckBox1);
//经过动态绑定事件后清除绑定事件
$(line).parent().parent().unbind("click",chooseCheckBox1);
}
function addOnClick(line){
//鼠标经过后动态添加事件,同时传入当前行参数
$(line).parent().parent().bind("click",{row1:$(line).parent().parent()},chooseCheckBox1);
}