В jQuery изменение текста внутри тега можно отслеживать несколькими способами, в зависимости от того, как это изменение происходит. Основной подход — это использовать MutationObserver, так как он позволяет отслеживать изменения в DOM. Вот пример:
1. Использование MutationObserver
$(document).ready(function () {
const targetNode = document.querySelector('#mySpan'); // Ваш span элемент
// Создаем наблюдатель
const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
if (mutation.type === 'characterData' || mutation.type === 'childList') {
console.log('Текст изменился:', mutation.target.textContent);
}
});
});
// Настраиваем, за чем наблюдать
observer.observe(targetNode, {
characterData: true, // Отслеживаем изменения текста
childList: true, // Отслеживаем добавление/удаление дочерних элементов
subtree: true // Следим за всем деревом внутри тега
});
});
2. Событие через пользовательское изменение
Если текст изменяется через jQuery или JavaScript (например, с помощью .text()
или .html()
), можно вручную вызывать кастомное событие:
$(document).ready(function () {
$('#mySpan').on('textChange', function () {
console.log('Текст изменен на:', $(this).text());
});
// Пример изменения текста
$('#changeText').on('click', function () {
$('#mySpan').text('Новый текст').trigger('textChange');
});
});
HTML:
<span id="mySpan">Старый текст</span>
<button id="changeText">Изменить текст</button>
3. Периодическая проверка (не рекомендуется)
Если вам не подходят MutationObserver или кастомные события, можно использовать таймер с регулярной проверкой:
$(document).ready(function () {
let lastText = $('#mySpan').text();
setInterval(() => {
const currentText = $('#mySpan').text();
if (currentText !== lastText) {
console.log('Текст изменился:', currentText);
lastText = currentText;
}
}, 500); // Проверка каждые 500 мс
});
Этот способ менее производителен, но может быть полезен в специфических ситуациях.
Какой способ лучше?
- Используйте MutationObserver, если текст изменяется динамически и вам нужно отслеживать изменения в DOM.
- Используйте событие
textChange
, если изменения текста инициируются вашим собственным кодом. - Способ с
setInterval
подходит для простых сценариев, но менее эффективен.