如果要检测类更改，最好的方法是使用Mutation Observers，它使您可以完全控制任何属性更改。但是，您需要自己定义侦听器，并将其附加到您正在侦听的元素上。好消息是，在附加侦听器后，您无需手动触发任何操作。
[如果使用jQuery添加或更改CSS类，如何触发事件？更改CSS类是否会引发jQuery change()事件？
无论何时在脚本中更改类，都可以使用trigger引发自己的事件。
$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });
但是，否则，没有任何方法可以在类更改时触发事件。 change()仅在焦点离开输入已更改的输入后才触发。
$(function() {
var button = $('.clickme')
, box = $('.box')
;
button.on('click', function() {
box.removeClass('box');
$(document).trigger('buttonClick');
});
$(document).on('buttonClick', function() {
box.text('Clicked!');
});
});.box { background-color: red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Hi</div>
<button class="clickme">Click me</button>如果需要触发特定事件，可以重写方法addClass（）来触发一个名为“ classadded”的自定义事件。
您可以绑定DOMSubtreeModified事件。我在这里添加一个示例：
如果您首先知道是什么事件更改了该类，则可以对同一事件稍加延迟，然后检查该类。例子
var timeout_check_change_class;
function check_change_class( selector )
{
$(selector).each(function(index, el) {
var data_old_class = $(el).attr('data-old-class');
if (typeof data_old_class !== typeof undefined && data_old_class !== false)
{
if( data_old_class != $(el).attr('class') )
{
$(el).trigger('change_class');
}
}
$(el).attr('data-old-class', $(el).attr('class') );
});
clearTimeout( timeout_check_change_class );
timeout_check_change_class = setTimeout(check_change_class, 10, selector);
}
check_change_class( '.breakpoint' );
$('.breakpoint').on('change_class', function(event) {
console.log('haschange');
});
恕我直言，更好的解决方案是将@ 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
});
});
如果要检测类更改，最好的方法是使用Mutation Observers，它使您可以完全控制任何属性更改。但是，您需要自己定义侦听器，并将其附加到您正在侦听的元素上。好消息是，在附加侦听器后，您无需手动触发任何操作。
$(function() {
(function($) {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
$.fn.attrchange = function(callback) {
if (MutationObserver) {
var options = {
subtree: false,
attributes: true
};
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(e) {
callback.call(e.target, e.attributeName);
});
});
return this.each(function() {
observer.observe(this, options);
});
}
}
})(jQuery);
//Now you need to append event listener
$('body *').attrchange(function(attrName) {
if(attrName=='class'){
alert('class changed');
}else if(attrName=='id'){
alert('id changed');
}else{
//OTHER ATTR CHANGED
}
});
});
在此示例中，事件侦听器附加到每个元素，但是在大多数情况下，您不希望这样做（节省内存）。将此“ attrchange”侦听器追加到要观察的元素。
我建议您重写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
});
只是概念证明：
查看要点以查看一些注释并保持最新：
https://gist.github.com/yckart/c893d7db0f49b1ea4dfb
(function ($) { var methods = ['addClass', 'toggleClass', 'removeClass']; $.each(methods, function (index, method) { var originalMethod = $.fn[method]; $.fn[method] = function () { var oldClass = this[0].className; var result = originalMethod.apply(this, arguments); var newClass = this[0].className; this.trigger(method, [oldClass, newClass]); return result; }; }); }(window.jQuery || window.Zepto));用法非常简单，只需在要观察的节点上添加一个新的listender，并照常操作这些类：
var $node = $('div') // listen to class-manipulation .on('addClass toggleClass removeClass', function (e, oldClass, newClass) { console.log('Changed from %s to %s due %s', oldClass, newClass, e.type); }) // make some changes .addClass('foo') .removeClass('foo') .toggleClass('foo');
change()不会触发。在选择或未选择选择框值的情况下会触发。
我不确定您是不是要更改CSS类定义（可以通过编程方式完成，但是很乏味，一般不建议这样做），或者是否将类添加或删除到元素中。无论哪种情况，都无法可靠地捕获到这种情况。
您当然可以为此创建您自己的事件，但这只能描述为advisory
。它不会捕获不是您执行的代码。或者，您可以在jQuery中覆盖/替换addClass()（等）方法，但是通过香草Javascript完成后，这将无法捕获（尽管我想您也可以替换那些方法）。
还有另一种方法无
A jQuery Plug-in to monitor Html Element CSS Changes by Rick Strahl
从上方引用
该手表插件通过连接到FireFox中的DOMAttrModified进行工作，到Internet Explorer中的onPropertyChanged，或通过使用计时器setInterval处理其他浏览器的更改检测。不幸的是，WebKit不支持DOMAttrModified在此时，Safari和Chrome当前必须使用较慢的速度setInterval机制。
使用最新的jquery突变
var $target = jQuery(".required-entry");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === "class") {
var attributeValue = jQuery(mutation.target).prop(mutation.attributeName);
if (attributeValue.indexOf("search-class") >= 0){
// do what you want
}
}
});
});
observer.observe($target[0], {
attributes: true
});
//任何更新$ target中具有类required-entry
的div的代码像$ target.addClass（'search-class'）;好问题。我正在使用Bootstrap下拉菜单，并且需要在隐藏Bootstrap下拉菜单时执行一个事件。当下拉列表打开时，包含类名称为“ button-group”的div添加一个类“ open”；并且按钮本身的“ aria-expanded”属性设置为true。当下拉列表关闭时，该类“打开”将从包含的div中删除，并且aria-expanded从true切换为false。
这使我想到了如何检测班级变化的问题。
使用Bootstrap，可以检测到“下降事件”。在此链接中查找“下降事件”。http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp
这里是在Bootstrap Dropdown上使用此事件的简单示例。
$(document).on('hidden.bs.dropdown', function(event) { console.log('closed'); });现在，我意识到这比所问的一般问题更具体。但是我想象其他尝试通过Bootstrap Dropdown检测打开或关闭事件的开发人员会发现这很有帮助。像我一样，他们可能一开始只是尝试检测元素类更改（显然不是那么简单）。谢谢。
如果需要触发特定事件，可以重写方法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
// ...
});
您可以绑定DOMSubtreeModified事件。我在这里添加一个示例：
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');
});
});
如果您首先知道是什么事件更改了该类，则可以对同一事件稍加延迟，然后检查该类。例子
//this is not the code you control
$('input').on('blur', function(){
$(this).addClass('error');
$(this).before("<div class='someClass'>Warning Error</div>");
});
//this is your code
$('input').on('blur', function(){
var el= $(this);
setTimeout(function(){
if ($(el).hasClass('error')){
$(el).removeClass('error');
$(el).prev('.someClass').hide();
}
},1000);
});
var timeout_check_change_class;
function check_change_class( selector )
{
$(selector).each(function(index, el) {
var data_old_class = $(el).attr('data-old-class');
if (typeof data_old_class !== typeof undefined && data_old_class !== false)
{
if( data_old_class != $(el).attr('class') )
{
$(el).trigger('change_class');
}
}
$(el).attr('data-old-class', $(el).attr('class') );
});
clearTimeout( timeout_check_change_class );
timeout_check_change_class = setTimeout(check_change_class, 10, selector);
}
check_change_class( '.breakpoint' );
$('.breakpoint').on('change_class', function(event) {
console.log('haschange');
});
如果要检测类更改，最好的方法是使用Mutation Observers，它使您可以完全控制任何属性更改。但是，您需要自己定义侦听器，并将其附加到您正在侦听的元素上。好消息是，在附加侦听器后，您无需手动触发任何操作。
我建议您重写addClass函数。您可以这样操作：
只是概念证明：
change()不会触发。在选择或未选择选择框值的情况下会触发。
还有另一种方法无
使用最新的jquery突变
好问题。我正在使用Bootstrap下拉菜单，并且需要在隐藏Bootstrap下拉菜单时执行一个事件。当下拉列表打开时，包含类名称为“ button-group”的div添加一个类“ open”；并且按钮本身的“ aria-expanded”属性设置为true。当下拉列表关闭时，该类“打开”将从包含的div中删除，并且aria-expanded从true切换为false。