He estado tratando de detectar si el contenido de un tramo ha cambiado y si ha cambiado para obtener el valor, hice un fragmento de código a continuación que cambiará el contenido del tramo para la prueba, pero por alguna razón no puedo detectar si el el contenido ha cambiado. Creo que posiblemente sea una limitación del jquery "cambiado" en el que posiblemente tenga que declarar el cambio que puede esperar para que haga algo.
¿Alguien tiene alguna recomendación de una mejor manera de ejecutar esto? Una vez que tenga el valor modificado en js, tendré que hacer js math para finalizar la solución.
$(document).ready(function() { // change contents of a span - testing purposes var delay = (function() { var timer = 0; return function(callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); delay(function() { document.getElementById('price').innerHTML = '$100.00'; }, 5000); // detect a change to contents a span $(".price").change(function() { alert(this.value); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span class="price">$90.00</span>Muchos problemas
.price en una declaración jQuery o document.querySelector(".price") o document.querySelectorAll(".price") en DOM<input> , <textarea> y <select> tienen un evento de cambio $(function() { // change contents of a span - testing purposes const delay = (() => { let timer = 0; return (callback, ms) => { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); delay(() => { $('.price').html('$100.00'); }, 2000); // detect a change to contents a span const elementToObserve = $('.price')[0]; // get the DOM element const process = () => { // callback const text = elementToObserve.textContent ; // gets $100.00 const amount = +text.trim().slice(1); // converts to 100 console.log("changed to", amount) } // create a new instance of 'MutationObserver' named 'observer', // passing it a callback function const observer = new MutationObserver(process); // call 'observe' on that MutationObserver instance, // passing it the element to observe, and the options object observer.observe(elementToObserve, { childList: true }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span class="price">$90.00</span>Versión anterior 'DOMSubtreeModified': ¡tenga en cuenta que se activa dos veces!
$(function() { // change contents of a span - testing purposes const delay = (() => { let timer = 0; return (callback, ms) => { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); delay(() => { $('.price').html('$100.00'); }, 2000); // detect a change to contents a span - deprecated but short $(".price").on("DOMSubtreeModified", function(e) { const amount = +$(this).text().trim().slice(1); // converts to 100 console.log(new Date(),amount) }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span class="price">$90.00</span>Usar MutationObserver
$(document).ready(function() { var delay = (function() { var timer = 0; return function(callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); delay(function() { document.getElementById('price').innerHTML = '$100.00'; }, 5000); // Select the target node. var target = document.querySelector('#price') // Create an observer instance. var observer = new MutationObserver(function(mutations) { console.log(target.innerText); }); // Pass in the target node, as well as the observer options. observer.observe(target, { attributes: true, childList: true, characterData: true }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <span id="price">$90.00</span>Si realmente necesita ejecutar algún código cuando se cambia el contenido de intervalo, puede probar el observador de mutación https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#example