Событие onmouseover не стреляет для ячейки таблицы

Question

У меня проблема с onmouseevent для ячейки таблицы. Что я делаю, это удаление и создание ячейки таблицы html с помощью jquery. При загрузке страницы это событие срабатывает отлично. Но после удаления и вставки ячейки таблицы снова в том же месте не запускается событие 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 ​​является массив идентификаторов сот и выше кода в цикле клетки.

Может ли кто-нибудь сказать, почему он не стреляет в событие 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> элемента для прослушивания других событий мыши бурлят ... нет необходимости для связывания их в клетку, это не далеко дешевле и работает на существующие и новые клетки вместе взятых.