动态绑定和删除onclick事件

因为对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);
    }

你可能感兴趣的:(JavaScript,jquery)