Прослушать изменение класса в jquery

Ответ 1

Вот некоторые другие находки, которые могут предоставить решение:

• Самый эффективный метод обнаружения/мониторинга изменений DOM?
• Как определить, когда изменяется класс элементов HTML?
• Мониторинг изменений DOM в JQuery

И как было предложено в # 2, почему бы не сделать current добавленный класс, а не идентификатор, и иметь следующий CSS-дескриптор действия show/hide.

<style type='text/css>
    .current{display:inline;}
    .notCurrent{display:none;}
</style>

Возможно, стоит посмотреть . on() в jquery.

Ответ 2

Вы можете связать событие DOMSubtreeModified. Я добавляю пример здесь:

$(document).ready(function() {
  $('#changeClass').click(function() {
    $('#mutable').addClass("red");
  });

  $('#mutable').bind('DOMSubtreeModified', function(e) {
    alert('class changed');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mutable" style="width:50px;height:50px;">sjdfhksfh
  <div>
    <div>
      <button id="changeClass">Change Class</button>
    </div>

Ответ 3

С чем-то вроде этого у вас есть по существу два варианта, обратные вызовы или опрос.

Так как вы не можете получить событие, которое будет запущено, когда DOM будет мутировать таким образом (надежно на всех платформах), вам, возможно, придется прибегать к опросу. Чтобы быть немного приятнее об этом, вы могли бы попробовать использовать requestAnimationFrame api, а не просто использовать что-то вроде setInterval изначально.

Используя самый базовый подход (например, используя setInterval и предполагая jQuery), вы можете попробовать что-то вроде этого:

var current_poll_interval;
function startCurrentPolling() {
  current_poll_interval = setInterval(currentPoll, 100);
}
function currentPoll() {
  if ( $('#nav-video-7').hasClass('current') ) {
    // ... whatever you want in here ...
    stopCurrentPolling();
  }
}
function stopCurrentPolling() {
  clearInterval(current_poll_interval);
}

Ответ 4

После изучения этого наилучшего ответа я нашел этот плагин jQuery, указанный в этом SO-ответе, где он связывает функцию прослушивателя при любом изменении атрибута HTML-элементов

Ответ 5

Я знаю, что это старый, но принятый ответ использует DOMSubtreeModified, который теперь не рекомендуется для MutationObserver. Вот пример использования jQuery (протестируйте здесь):

// Select the node that will be observed for mutations
let targetNode = $('#some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.attributeName === "class") {
            var classList = mutation.target.className;
            // Do something here with class you're expecting
            if(/red/.exec(classList).length > 0) {
                console.log('Found match');
            }
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode[0], config);

// Later, you can stop observing
observer.disconnect();

Ответ 6

Iv создал полный проект npm, позволяющий отслеживать изменения в classList, и дает вам доступ к новому и старому classList внутри события.

В этом проекте используется Mutation Observer, затем вы привязываете события к рассматриваемому элементу.

https://github.com/webciter/classListMonitor