optimization jQuery for IE

optimization jQuery for IE

本文关键字：IE for jQuery optimization      更新时间：2023-09-26

我有一个功能:

function doBlamingItem($cell, showEditMark) {
    $cell.hover(function () {
        $cell.toggleClass('clickable-cell', showEditMark).toggleClass('editing-cell', !showEditMark);
    }, function() {
        $cell.removeClass('clickable-cell editing-cell');
} );};

在$(document).ready()我应用这个函数的一些单元格在我的表(~500)，当我移动我的鼠标在它-在FF或Chrome都是好的，但IE7-9开始滞后，我不知道如何修复它:(

和$(document).ready():

中的代码
var i = firstRowOnPage();
while (table.GetRow(i) != null) {
    if (condition) {
        var row = table.GetRow(i);
        var elementInCellId = column.fieldName + '_' + rowKey;
        var $cell = $(row.cells[realIndex]).attr('id',elementInCellId);
        doBlamingItem($cell, true);
        setClickable(editInfo, $cell);
    }
i++;
}

我对每个单元格都使用doBlamingItem因为有些单元格的showEditMark=true，有些单元格的showEditMark=false

你的代码基本上(1)找到这500个元素，(2)迭代它们到(3)分配悬停事件(由mouseenter和mouseleave组成)。你听说过委托活动吗?

设置时间几乎为零(只注册了2个事件处理程序，而不是1000个)。没有元素被选择和遍历。

(function($, undefined){
  // if you want it global
  var showEditMark = true;
  // otherwise save that state to some element's data()
  $(function(){
    $(document.body).delegate('.your-table-selector td', {
      mousenter: function(e){
        $(this)
          .toggleClass('clickable-cell', showEditMark)
          .toggleClass('editing-cell', !showEditMark);
      },
      mouseleave: function(e){
        $(this).removeClass('clickable-cell editing-cell');
      }
    });
  });
})(jQuery);

感谢所有回答我问题的人，但当我意识到问题不在javascript中…我的页面有大dom树的元素和许多css样式，所以IE有问题呈现它

相关文章：