javascript - 为 IE 优化 jQuery

Question

我有函数:

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

Answer 1

您的代码基本上是 (1) 找到那 ~500 个元素，(2) 迭代它们以 (3) 分配悬停事件(由 mouseenter 和 mouseleave 组成)。你听说过delegated events吗？ ？

几乎没有设置时间(只注册了 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);