blur не работает в настраиваемой редактируемой ячейке

Question

Я использую плагин DataTables.Net для jQuery, и я хочу добавить пользовательское встроенное решение для редактирования. Я знаю, что есть Editable plug-in, но он не является бесплатным.

Я начал со следующим по щелчку действия события

// Activate an inline edit on click of a table cell 

$('#table1').on('click', 'tbody td:not(:first-child)', function (e) { 
    editCell(this); 
}); 

который вызывает функцию editCell, которая делает клетку редактируемые

function editCell(HTMLTableCellElement) { 
    // Check if selected cell is not in edit mode 
    if ($(HTMLTableCellElement).hasClass('rowEditable') == false) { 
     // Mark cell to edit mode 
     $(HTMLTableCellElement).addClass('rowEditable'); 
     // Make editable 
     $(HTMLTableCellElement).html('<input type="text" value="' + $(HTMLTableCellElement).html() + '">'); 
     // Trigger when cell loose focus 
     $(HTMLTableCellElement).blur(function() { 
      alert("Record is saving"); 
      $(HTMLTableCellElement).html($(HTMLTableCellElement).find("input").val()); 
      $(HTMLTableCellElement).removeClass('rowEditable'); 
     }); 
    } 
} 

, но у меня есть проблема что alert("Record is saving"); никогда не называется.

EDIT: Как заметил Gene R, мне нужно было размыть вход, а не сама ячейка . Решение заключается в изменении этой линии

$(HTMLTableCellElement).blur(function() 

Для этого

// Focus the cell input 
// alert("Record is saving"); 
$(HTMLTableCellElement).find('input').focus(); 
$(HTMLTableCellElement).find('input').blur(function() 

Answer 1

Вашего Интернет HTMLTableCellElement является td, который не имеет blur события. Более того, когда вы меняете код на то, что вы показали, вам также необходимо изменить обработку событий.

И, во-вторых, вы фактически определяете событие blur и не вызываете его. Вы должны определили blur событие, даже прежде чем положить эту строку:

$(HTMLTableCellElement).find('input').blur(function() 

И вместо указанных выше строк, используйте:

$(HTMLTableCellElement).find('input').trigger("blur"); 

Answer 2

Я построил свой собственный плагин, который делает это, что очень конфигурируемый и супер быстро реализовать.

Вот мерзавец репо: DataTables CellEdit Plugin

А вот мой original post с простым примером: