jquery中的DOM事件綁定與解除綁定

標籤：class   grid   事件綁定   狀態   單機   concat   beginedit   code   自己   

　　在jquery事件中有時候有的事件只需要在綁定後有效觸發一次，當通過e.target判斷觸發條件有效觸發後解除綁定事件，來避免多次無效觸發和與未知情況造成衝突。

　　這時候就要用到了jquery中的事件綁定與事件解除綁定。

　　　　　

1 $(document).on(‘click.endEdit‘,function (e) {2                         if(!$(e.target).hasClass(‘datagrid-cell‘)&&e.target.tagName!="TD"){  //事件發生後的判斷條件3                             dg.datagrid(‘endEdit‘, opts.editIndex);   //滿足判斷條件情況下執行的操作4                             $(document).off(‘.endEdit‘); 　　 //在操作結束後解除綁定事件5                         }6                     })

    　　　　　　其中on.()中的.endEdit是自己來對事件命名。在達到條件後可以通過命名來對需要解除綁定的事件進行解除綁定的操作。就相當於給每個事件加上了一個ID可以通過

這個ID對事件進行管理。

 

　　　　我所在的項目需要一個表格控制項，可拖拽（改變列的寬度)，可編輯（單擊表格可即時編輯其中的內容），列頭固定，自適應。easyui中的表格控制項都滿足了要求。但是

表格單機可編輯出現了一個小bug總會有一個表格處於編輯狀態。而需求是在點擊除表格外的其他部分時需要讓表格全部處於不可編輯狀態。就用上以上代碼。

:

擴充代碼如下：

 1  $.extend($.fn.datagrid.methods, { 2         editCell: function(jq,param){ 3             return jq.each(function(){ 4                 var opts = $(this).datagrid(‘options‘); 5                 var fields = $(this).datagrid(‘getColumnFields‘,true).concat($(this).datagrid(‘getColumnFields‘)); 6                 for(var i=0; i<fields.length; i++){ 7                     var col = $(this).datagrid(‘getColumnOption‘, fields[i]); 8                     col.editor1 = col.editor; 9                     if (fields[i] != param.field){10                         col.editor = null;11                     }12                 }13                 $(this).datagrid(‘beginEdit‘, param.index);14                 var ed = $(this).datagrid(‘getEditor‘, param);15                 if (ed){16                     if ($(ed.target).hasClass(‘textbox-f‘)){17                         $(ed.target).textbox(‘textbox‘).focus();18                     } else {19                         $(ed.target).focus();20                     }21                 }22                 for(var i=0; i<fields.length; i++){23                     var col = $(this).datagrid(‘getColumnOption‘, fields[i]);24                     col.editor = col.editor1;25                 }26             });27         },28         enableCellEditing: function(jq){29             return jq.each(function(){30                 var dg = $(this);31                 var opts = dg.datagrid(‘options‘);32                 opts.oldOnClickCell = opts.onClickCell;33                 opts.onClickCell = function(index, field){34                     if (opts.editIndex != undefined){35                         if (dg.datagrid(‘validateRow‘, opts.editIndex)){36                             dg.datagrid(‘endEdit‘, opts.editIndex);37                             opts.editIndex = undefined;38                         } else {39                             return;40                         }41                     }42                     dg.datagrid(‘editCell‘, {43                         index: index,44                         field: field45                     });46                     opts.editIndex = index;47                     opts.oldOnClickCell.call(this, index, field);48                     //添加事件--點擊表格外部時表格編輯狀態恢複為不可編輯49                     $(document).on(‘click.endEdit‘,function (e) {50                         if(!$(e.target).hasClass(‘datagrid-cell‘)&&e.target.tagName!="TD"){51                             dg.datagrid(‘endEdit‘, opts.editIndex);52                             $(document).off(‘.endEdit‘);53                         }54                     })55                 }56             });57         }58     });59 60     $(function(){61         $(‘#dg‘).datagrid().datagrid(‘enableCellEditing‘);62     })

 

jquery中的DOM事件綁定與解除綁定