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

我想要一些类似于：

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

---

您可以使用以下内容：

$(this).addClass('someClass');

$(Selector).trigger('ClassChanged')

$(otherSelector).bind('ClassChanged', data, function(){//stuff });

但除此之外，没有预定义的函数在类更改时触发事件

---

阅读有关触发器的更多信息

使用

触发器

触发您自己的事件。当您更改类时，使用名称添加触发器

$("#main").on('click', function () {
    $("#chld").addClass("bgcolorRed").trigger("cssFontSet");
});

$('#chld').on('cssFontSet', function () {

    alert("Red bg set ");
});

---

类更改时不会引发任何事件。另一种方法是在通过编程更改类时手动引发事件：

$someElement.on('event', function() {
    $('#myDiv').addClass('submission-ok').trigger('classChange');
});

// in another js file, far, far away
$('#myDiv').on('classChange', function() {
     // do stuff
});

---

更新

这个问题似乎吸引了一些访问者，因此这里有一个更新方法，无需使用新的

MutationObserver

修改现有代码即可使用：

var$div=$（“#foo”）；
var观察者=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
if（mutation.attributeName==“class”）{
var attributeValue=$（mutation.target）.prop（mutation.attributeName）；
log（“类属性更改为：”，attributeValue）；
}
});
});
观察员观察（$div[0]{
属性：true
});
$div.addClass（“红色”）
.red{color:#C00；}

#foo.bar
您可以用自己的函数替换原始jQuery addClass和removeClass函数，这些函数将调用原始函数，然后触发自定义事件。（使用自调用匿名函数包含原始函数引用）

然后，代码的其余部分将如您所期望的那样简单

$(selector).on('classChanged', function(){ /*...*/ });

更新：

这种方法假设类只会通过jQuery addClass和removeClass方法进行更改。如果以其他方式修改类（例如通过DOM元素直接操作class属性），则需要使用类似于
MutationObserver
s的内容，如此处接受的答案中所述

作为对这些方法的两项改进：


使用作为回调函数参数传递的特定类，为添加（
classAdded
）或删除（
classRemoved
）的每个类触发事件，并且仅当特定类实际添加（以前不存在）或删除（以前存在）时才会触发
只有在实际更改任何类时才触发
classChanged

(function( func ) {
    $.fn.addClass = function(n) { // replace the existing function on $.fn
        this.each(function(i) { // for each element in the collection
            var $this = $(this); // 'this' is DOM element in this context
            var prevClasses = this.getAttribute('class'); // note its original classes
            var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString(); // retain function-type argument support
            $.each(classNames.split(/\s+/), function(index, className) { // allow for multiple classes being added
                if( !$this.hasClass(className) ) { // only when the class is not already present
                    func.call( $this, className ); // invoke the original function to add the class
                    $this.trigger('classAdded', className); // trigger a classAdded event
                }
            });
            prevClasses != this.getAttribute('class') && $this.trigger('classChanged'); // trigger the classChanged event
        });
        return this; // retain jQuery chainability
    }
})($.fn.addClass); // pass the original function as an argument

(function( func ) {
    $.fn.removeClass = function(n) {
        this.each(function(i) {
            var $this = $(this);
            var prevClasses = this.getAttribute('class');
            var classNames = $.isFunction(n) ? n(i, prevClasses) : n.toString();
            $.each(classNames.split(/\s+/), function(index, className) {
                if( $this.hasClass(className) ) {
                    func.call( $this, className );
                    $this.trigger('classRemoved', className);
                }
            });
            prevClasses != this.getAttribute('class') && $this.trigger('classChanged');
        });
        return this;
    }
})($.fn.removeClass);



使用这些替换函数，您可以通过检查回调函数的参数来处理通过classChanged更改的任何类或添加或删除的特定类：

$(document).on('classAdded', '#myElement', function(event, className) {
    if(className == "something") { /* do something */ }
});

事件的处理程序必须是触发事件的同一项$（this.addClass（'someClass'）$（选择器）.trigger（'ClassChanged'）//它必须是相同的选择器$（选择器）.bind（'ClassChanged'，data，function（）{//stuff}）；似乎您是从这里复制的，如果是，那么如果您也提供了链接，那么就很好了。这很好，但是在“代码的其余部分”中，事件处理程序应该委托给目标选择器，以允许绑定到新元素：
$（parent\u selector）.on（'classChanged'，target\u selector，function（）{/*…*/}）。我花了一段时间才明白为什么动态创建的元素没有触发处理程序。在完成此答案时，我发现：@Benj与我的原始答案相同（即使用
trigger（）
），但请注意，由于使用了
bind（）
，它非常过时。我不确定它是如何“完成”任何事情的，虽然在我的例子中，我需要在dom节点具有特定类时触发事件
MutationObserver
适用于meThis，这是此解决方案的一种改进形式，带有过滤器
$(document).on('classAdded', '#myElement', function(event, className) {
    if(className == "something") { /* do something */ }
});