onmouseover event is not firing for a table cell

Question

I've problem with onmouseevent for a table cell. What I'm doing is removing and creating html table cell with the help of jquery. When page loads this event fires perfectly fine. But after removing and inserting table cell again at same position does not fire the onmouseover event. Below is the code what I've done...

var ModularAdHolderCell = '';
var MergedCellValues = new Array();
$('#our_table tr').each(function (i, el) {
  for (var cellCnt = 0; cellCnt < this.cells.length; cellCnt++) {
    if ($(this.cells[cellCnt]).attr('class') == 'highlighted' || $(this.cells[cellCnt]).attr('class') == 'OrangeBackground highlighted') {
            var id = $(this.cells[cellCnt]).attr('id');
            ModularAdHolderCell = id;
            id = 'hdn_' + id;
            var MergedCells = $(this.cells[cellCnt]).find('input:hidden').val();
            if (MergedCells != '')
                MergedCellValues = MergedCells.trim().split('=');
        }
    }
});

var row = document.all.our_table.rows[0];
var TotalCellInRow = row.cells.length;
var Cell = row.insertCell(TotalCellInRow);
var element1 = document.createElement("input");
element1.type = "hidden";
element1.id = "hdn_" + MergedCellValues[cnt];

row.cells(TotalCellInRow).setAttribute('onmouseover', 'MOuseOver(this)');
row.cells(TotalCellInRow).setAttribute('onmouseout', 'MouseOut()');
row.cells(TotalCellInRow).setAttribute('onmousemove', 'MOuseOver(this)');
row.cells(TotalCellInRow).setAttribute('onmouseenter', 'MOuseOver(this)');

row.cells(TotalCellInRow).setAttribute('unitheight', Unitwidth);
row.cells(TotalCellInRow).setAttribute('unitwidth', UnitHeight);
row.cells(TotalCellInRow).setAttribute('id', MergedCellValues[cnt]);

row.cells(TotalCellInRow).setAttribute('width', Unitwidth);
row.cells(TotalCellInRow).setAttribute('height', UnitHeight);
row.cells(TotalCellInRow).appendChild(element1);

$(row).find('#' + MergedCellValues[cnt] + '').attr('onmouseover', 'MOuseOver(this)');
$(row).find('#' + MergedCellValues[cnt] + '').attr('onmouseout', 'MouseOut()');
$(row).find('#' + MergedCellValues[cnt] + '').attr('onmousemove', 'MOuseOver(this)');
$(row).find('#' + MergedCellValues[cnt] + '').attr('onmouseenter', 'MOuseOver(this)');

Here MergedCellValues is the array of cell id and above code is in the loop of the cell.

Can anyone tell why it does not firing onmouseover event for the cell ?

Answer 1

Setting an attribute just isn't the intended way to attach an event handler, you can simplify and speed things up an great deal here, remove all of your .setAttribute('onmouseover', 'MOuseOver(this)'); logic...all 8 lines, then just attach one set of handlers to the <table> to handle all of this:

$("#our_table")
   .delegate("td", "mouseover mousemove mouseenter", MOuseOver)
   .delegate("td", "mouseout", MouseOut);

then in your MOuseOver and MouseOut functions, just use this to refer to the cell.

This attaches handlers to the <table> element to listen for the other mouse events bubbling up...no need for binding them per-cell, this is far less expensive and works on current and new cells combined.