在jQuery中触发CSS类更改事件

如果使用jQuery添加或更改CSS类，如何触发事件？ 更改CSS类是否会触发jQuery

change（）

事件？

change（）

在添加或删除CSS类或更改定义时不会触发。它在选择或取消选择选择框值等情况下激发

我不确定您的意思是CSS类定义是否发生了更改（这可以通过编程方式完成，但很乏味，一般不建议这样做），还是在元素中添加或删除了类。在这两种情况下都无法可靠地捕捉到这种情况

当然，您可以为此创建自己的活动，但这只能称为建议。它不会捕获不属于您的代码

---

或者，您可以覆盖/替换jQuery中的

addClass（）

（etc）方法，但这不会捕获通过普通Javascript完成的操作（尽管我猜您也可以替换这些方法）。

每当您更改脚本中的类时，您可以使用

触发器来引发您自己的事件

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged')
....
$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

但除此之外，当类发生更改时，没有任何方式可以触发事件<代码>更改（）


$（函数（）{
变量按钮=$（'.clickme'）
，box=$（“.box”）
;
在（'click'，function（）{
box.removeClass（'box'）；
$（document.trigger（'buttonClick'）；
});
$（文档）.on（'buttonClick'，function（）{
box.text（'Clicked！'）；
});
});
.box{背景色：红色；}

你好
单击我
我建议您重写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
    });
});

如果需要触发特定事件，可以重写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
    // ...
});

只是一个概念证明：

查看要点以查看一些注释并保持最新：


(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');

还有一种方法不触发自定义事件


从上面引用

watch插件通过连接FireFox中的DOMAttrModified来工作，
要在Internet Explorer中更改OnProperty，或使用带有
setInterval处理其他浏览器的更改检测。
不幸的是，WebKit不支持DOMAttrModified
目前，Safari和Chrome必须使用较慢的
设置间隔机制

如果您首先知道某个事件改变了类，则可以对同一事件使用轻微延迟，并检查该类的。
范例

//这不是您控制的代码
$（'input'）。在（'blur'，function（）上{
$（this.addClass（'error'）；
$（此）.before（“警告错误”）；
});
//这是你的密码
$（'input'）。在（'blur'，function（）上{
var el=$（本）；
setTimeout（函数（）{
if（$（el）.hasClass（'error'））{
$（el）.removeClass（'error'）；
$（el）.prev（'.someClass'）.hide（）；
}
},1000);
});

如果您想检测类的变化，最好的方法是使用变异观察者，它可以让您完全控制任何属性的变化。不过，您需要自己定义侦听器，并将其附加到正在侦听的元素中。好消息是，一旦附加了侦听器，就不需要手动触发任何事件

$(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”侦听器附加到您想要观察的元素。
好问题。我正在使用引导下拉菜单，需要在引导下拉菜单被隐藏时执行一个事件。打开下拉列表时，类名为“button group”的包含div添加了一个“open”类；按钮本身的“aria expanded”属性设置为true。当下拉列表关闭时，该“open”类将从包含的div中删除，aria expanded将从true切换到false

这让我想到了这个问题，如何检测阶级的变化

通过引导，可以检测到“下拉事件”。在此链接中查找“下拉事件”。

下面是一个在引导下拉列表中使用此事件的快速而肮脏的示例

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

现在我意识到这比一般的问题更具体。但我想，其他开发人员尝试使用引导下拉菜单检测打开或关闭的事件时，会发现这很有用。和我一样，他们最初可能只是尝试检测元素类的变化（这显然不是那么简单）。谢谢。
您可以绑定DOMSubtreeModified事件。我在此添加一个示例：

HTML

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

使用最新的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
            });

//任何更新div的代码，其类必须输入，单位为$target
比如$target.addClass（'search-class'）
 触发调用函数的事件的处理方法是什么？为什么不直接调用函数而不是触发它呢？触发是一种允许某些元素“订阅”事件的机制。这样，当事件被触发时，这些事件可以同时发生并运行各自的功能。例如，如果我有一个对象从红色变为蓝色，三个对象等待它改变，当它改变时，我可以触发
changeColor
事件，所有订阅该事件的对象都可以做出相应的反应；这门课肯定是因为其他的“a”而增加的
$(document).ready(function() {
  $('#changeClass').click(function() {
    $('#mutable').addClass("red");
  });

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

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
            });

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');
});