表格單元格未觸發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>元素上，以偵聽其他正在冒泡的鼠標事件...無需按單元綁定它們，這要便宜得多，並且可以在當前和新單元上結合使用。