小编典典

如何使用jQuery在类更改时触发事件?

javascript

我想要类似的东西:

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

阅读 278

收藏
2020-04-25

共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。如果需要支持旧版浏览器,则需要使用我在第一个示例中概述的方法。

2020-04-25