jQuery слушатель события, когда текст изменился в ячейке <td>?

Question

Есть ли способ в jQuery присоединить слушатель к ячейке, чтобы при изменении текста внутри ячейки (по JavaScript, а не по пользователю) происходило событие?

Answer 1

Чтобы расширить ответ Mway , вот код.

var td = $('#my-table tr td:eq(1)');
var tdHtml = td.html();
setInterval(function() {

    if (td.html() !== tdHtml) {
         // it has changed
         tdHtml = td.html();
    } 

}, 500);

... и за его второе предложение.

function updateTd(html) {
     $('#my-table tr td:eq(1)').html(html);

     // additional code
}

Вы также можете привязать событие DOMSubtreeModified к элементу, но поддержка браузера не самая лучшая.

Answer 2

Не изначально, нет. У вас есть пара вариантов:

1) Используйте setInterval() для проверки значения относительно его предыдущего значения и действуйте соответствующим образом, если оно отличается.

2) Используйте общий метод для изменения содержимого ячейки, так что вы также можете выполнять дополнительную логику при изменении ее значения, не перезаписывая его много раз.

Answer 3

Horrors. Может быть приемлемым в 2010 году.

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            // NB the 1st char put or typed into a TD causes a mutation in the TD... 
            // but chars 2 ... n cause a mutation in its child '#text' node
            let target = mutation.target;
            if( target.cellIndex === undefined ){
                target = target.parentElement;
            }
            // NB don't use a "truthy" test for cellIndex here: you would miss index 0!
            if( target !== null && target.cellIndex !== undefined ){
                // ... then the target is the TD where the content has changed.  
            }
       });
    });

    const config = { attributes: true, childList: true, characterData : true, subtree : true };
    observer.observe( htmlTable, config );