Как заставить Jquery следить за селектором и реагировать в случае изменений его атрибутов?

Question

[Сергей Dydaevskiy]

Собственно сам вопрос заключается в названии темы. В общем...
Имеется селектор:

.tg-grid-holder.tg-layout-masonry

В случае если какие либо его атрибуты были изменены мне необходимо выполнить функцию. Как это сделать?

Answer 1

[sergski]

например так:

<div id="foo" class="tg-grid-holder tg-layout-masonry">

const str = 'tg-grid-holder tg-layout-masonry';

setInterval(function() {
  var el = document.querySelector("#foo");
  var sel = el.getAttribute("class");

  if (str !== sel) {
    alert('oops!');
  }
}, 1000);

Comments

[Сергей Dydaevskiy]

Спасибо

Answer 2

[Антон Иванов]

Ну есть разные библиотеки типа вот этой
https://github.com/melanke/Watch.JS/

Пару раз использовал, вроде работало как надо.

Answer 3

[GreatRash]

var div = $('div.foo');

// новейшие браузеры (ИЕ 11+)
var observerConfig = {
  attributes: true // отслеживаем только изменения атрибутов
};

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    switch (mutation.attributeName) {
      case 'class':
        alert('у ноды поменялся класс');
        break;
      default:
        alert('у ноды поменялся атрибут ' + mutation.attributeName);
    }
  });
});

observer.observe(div[0], bserverConfig);
// =============================

// более старые браузеры (ИЕ 9+)
div.on('DOMAttrModified', function(e) {
  alert('у ноды поменялся атрибут ' + e.originalEvent.attrName);
});
// =============================

setTimeout(function() {
  div.addClass('test');
}, 5000);