javascript - 如何使用 jQuery 在类更改时触发事件？

Question

我想要这样的东西:

$('#myDiv').bind('class "submission ok" added'){
    alert('class "submission ok" has been added');
});

Answer 1

类更改时不会引发任何事件。另一种方法是在您以编程方式更改类时手动引发事件:

$someElement.on('event', function() {
    $('#myDiv').addClass('submission-ok').trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
     // do stuff
});

---

更新 - 2015

这个问题似乎吸引了一些访问者，所以这里有一个更新方法，无需使用新的 MutationObserver 修改现有代码即可使用:

var $div = $("#foo");
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var attributeValue = $(mutation.target).prop(mutation.attributeName);
    console.log("Class attribute changed to:", attributeValue);
  });
});

observer.observe($div[0], {
  attributes: true,
  attributeFilter: ['class']
});

$div.addClass('red');

.red {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="foo" class="bar">#foo.bar</div>

请注意，MutationObserver 仅适用于较新的浏览器，特别是 Chrome 26、FF 14、IE 11、Opera 15 和 Safari 6。参见 MDN更多细节。如果您需要支持旧版浏览器，那么您将需要使用我在第一个示例中概述的方法。

---

更新 - 2022

下面是封装在 jQuery 扩展方法中的上述实现:

// extension method:
$.fn.classChange = function(cb) {
  return $(this).each((_, el) => {
    new MutationObserver(mutations => {
      mutations.forEach(mutation => cb && cb(mutation.target, $(mutation.target).prop(mutation.attributeName)));
    }).observe(el, {
      attributes: true,
      attributeFilter: ['class'] // only listen for class attribute changes 
    });
  });
}

// usage:
const $foo = $("#foo").classChange((el, newClass) => console.log(`#${el.id} had its class updated to: ${newClass}`));
const $fizz = $("#fizz").classChange((el, newClass) => console.log(`#${el.id} had its class updated to: ${newClass}`));

// trigger
$('#trigger').on('click', () => {
  $foo.removeClass('red');
  $fizz.addClass('green dark-bg');
});

.red {
  color: #C00;
}

.green {
  color: #0C0;
}

.dark-bg {
  background-color: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button id="trigger">Change classes</button>
<div id="foo" class="bar red">#foo.bar</div>
<div id="fizz" class="buzz">#fizz.buzz</div>