我建议您重写addClass函数。你可以这样做:

// Create a closure
(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // call your function
        // this gets called everytime you use the addClass method
        myfunction();

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    // do stuff
});

您可以绑定domsubtremodified事件。我在这里加一个例子:

HTML

<div id="mutable" style="width:50px;height:50px;">sjdfhksfh<div>
<div>
  <button id="changeClass">Change Class</button>
</div>

JavaScript

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

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

http://jsfiddle.net/hnCxK/13/

我建议您重写addClass函数。你可以这样做:

// Create a closure
(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // call your function
        // this gets called everytime you use the addClass method
        myfunction();

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    // do stuff
});

依我看，更好的解决方案是结合@RamboNo5和@Jason的两个答案

我的意思是重写addClass函数并添加一个名为cssClassChanged的自定义事件

// Create a closure
(function(){
    // Your base, I'm in it!
    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function(){
        // Execute the original method.
        var result = originalAddClassMethod.apply( this, arguments );

        // trigger a custom event
        jQuery(this).trigger('cssClassChanged');

        // return the original result
        return result;
    }
})();

// document ready function
$(function(){
    $("#YourExampleElementID").bind('cssClassChanged', function(){ 
        //do stuff here
    });
});

好问题。我正在使用引导下拉菜单，需要在引导下拉菜单被隐藏时执行一个事件。当打开下拉菜单时，包含类名为“button-group”的div会添加一个类名为“open”;按钮本身有一个“aria-expanded”属性设置为true。当下拉菜单关闭时，“open”类将从包含的div中删除，aria-expanded将从true切换为false。

这让我想到了一个问题，如何检测类的变化。

使用Bootstrap，可以检测到“下拉事件”。在这个链接中寻找“下拉事件”。 http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

下面是在引导下拉列表中使用此事件的快速示例。

$(document).on('hidden.bs.dropdown', function(event) {
    console.log('closed');
});

现在我意识到这比被问到的一般问题更具体。但我想其他试图用Bootstrap下拉菜单检测打开或关闭事件的开发人员会发现这很有帮助。像我一样，他们最初可能只是尝试检测元素类的变化(这显然不是那么简单)。谢谢。

如果你需要触发一个特定的事件，你可以重写addClass()方法来触发一个名为'classadded'的自定义事件。

这里有:

(function() {
    var ev = new $.Event('classadded'),
        orig = $.fn.addClass;
    $.fn.addClass = function() {
        $(this).trigger(ev, arguments);
        return orig.apply(this, arguments);
    }
})();

$('#myElement').on('classadded', function(ev, newClasses) {
    console.log(newClasses + ' added!');
    console.log(this);
    // Do stuff
    // ...
});