skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

Как на jQuery можно отслеживать изменение текстового тега

В 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 подходит для простых сценариев, но менее эффективен.
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как на jQuery написать код, который при клике на кнопку будет копировать текущий url сайта?

Вот пример кода на jQuery, который копирует текущий URL сайта в буфер обмена при нажатии на кнопку с классом copy-current-url: Как это работает: Этот подход работает в большинстве браузеров. Однако, если вы используете современные методы, можно также заменить document.execCommand на API navigator.clipboard, если поддержка браузера это позволяет.
Подробнее

Как на jQuery отслеживать событие ввода символов?

Для отслеживания события ввода символов на jQuery можно использовать событие input. Оно срабатывает каждый раз, когда происходит изменение в поле ввода (например, при наборе текста или удалении символов). Вот пример: В этом примере: Если нужно отследить событие только при изменении текста (например, при нажатии клавиш), можно использовать событие keyup, но input более универсально, так как…
Подробнее

Как на JQuery сделать визуальный таймер на один час после указанного времени в data-time-created

Для создания визуального таймера на основе времени, указанного в атрибуте data-time-created, можно использовать jQuery. Вот пример реализации: Код HTML: Код jQuery: Что делает скрипт: Результат: Элемент <div class=»order-counter»> будет отображать обратный отсчет в формате ЧЧ:ММ:СС. После окончания времени он покажет сообщение, что время истекло. Если на странице может быть несколько элементов с классом .order-counter, нужно…
Подробнее