如何使用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
});

更新

这个问题似乎正在吸引一些访问者，因此这里是一种更新方法，可以使用该方法而不必使用new修改现有代码MutationObserver：

var $div = $("#foo");

var observer = new MutationObserver(function(mutations) {

  mutations.forEach(function(mutation) {

    if (mutation.attributeName === "class") {

      var attributeValue = $(mutation.target).prop(mutation.attributeName);

      console.log("Class attribute changed to:", attributeValue);

    }

  });

});

observer.observe($div[0], {

  attributes: true

});



$div.addClass('red');


.red { color: #C00; }


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo" class="bar">#foo.bar</div>

请注意，MutationObserver只能用于更新的浏览器，特别是Chrome 26，FF 14，IE 11，Opera
15和Safari6。如果需要支持旧版浏览器，则需要使用我在第一个示例中概述的方法。