表格单元格未触发onmouseover事件

Question

我对表格单元格的onmouseevent有问题。 我正在做的是在jquery的帮助下删除并创建html表单元格。 页面加载时，此事件会正常触发。 但是，在相同位置再次删除并插入表格单元格后，不会触发onmouseover事件。 下面是我完成的代码...

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

这里MergedCellValues是单元格ID的数组，上面的代码在单元格的循环中。

谁能说出为什么它不触发该单元的onmouseover事件？

Answer 1

设置属性并不是附加事件处理程序的预期方式，您可以在此处简化和加快处理速度，删除所有.setAttribute('onmouseover', 'MOuseOver(this)'); 逻辑...所有8行，然后只需将一组处理程序附加到<table>即可处理所有这些操作：

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

然后在您的MOuseOver和MouseOut函数中，只需使用this来引用该单元格即可。

这会将处理程序附加到<table>元素上，以侦听其他正在冒泡的鼠标事件...无需按单元绑定它们，这要便宜得多，并且可以在当前和新单元上结合使用。