Question

I have function:

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

in $(document).ready() I apply this function for some cells in my table (~500) and when I move my mouse upon it – in FF or Chrome all is okay, but IE7-9 starts lagging and I don’t know how to fix it 🙁

and code from $(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++;
}

I use doBlamingItem for every cell because for some of them showEditMark=true, for other showEditMark=false

Answer 1

Your code basically (1) finds those ~500 elements, (2) iterates them to (3) assign hover events (consisting of mouseenter and mouseleave). Have you heard of delegated events?

The setup time is virtually none (only 2 event handlers, instead of 1000 are registered). No elements are selected and traversed.

(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);