Добавить класс к элементу при изменении цены. JQuery DOMCharacterDataModified

Question

Я хотел бы добавить класс к диапазону цен при изменении значения $. Лучшая визуальная подсказка для клиентов при добавлении продуктов.

Пробовал:

$(document).ready(function() { 
    $('.cart-price').bind('DOMCharacterDataModified', function() { 
     $('.cart-price').addClass('change'); 

    var delay = setTimeout(function(){ 
     $('.cart-price').removeClass('change'); 
    }, 1100) 
    }); 
}); 

CSS:

.cart-price.change 
{ 
    color:#F00; 
} 

Answer 1

Похоже, это будет лучше использовать mutation observers, потому что mutation events являются устаревшими. Но знать о browser compatibility - IE < 11 не поддерживает это

$(document).ready(function() { 
    var $cartprice = $('.cart-price'); 

    if ('MutationObserver' in window) { 
     var observer = new MutationObserver(highlight); 
     observer.observe($cartprice[0], { 
      childList: true 
     }); 
    } else { 
     //for browsers which does not support MutationObserver 
     $cartprice.on('DOMSubtreeModified', highlight) 
    } 

    function highlight() { 
     $cartprice.addClass('change'); 

     var delay = setTimeout(function() { 
      $cartprice.removeClass('change'); 
     }, 1100) 
    } 
}); 

Демо: Fiddle