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

Question

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

Answer 1

Расширить Mway's ответ, Вот какой-то код.

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

Ужасы. Могут быть приемлемы в 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 );

Answer 4

Используйте прослушиватель входных событий.

$ (документ) .on («вход», «#ttable> Tbode> TR> TD», функция () {})