Question

如果使用jQuery添加或更改了css类，我该如何触发事件？更改CSS类是否触发了jQuery change（）事件？

Answer 1

每当您更改脚本中的某个类时，您都可以使用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>

More info on jQuery Triggers

Answer 2

恕我直言，更好的解决方案是将@ 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
    });
});

Answer 3

如果要检测类更改，最好的方法是使用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”侦听器附加到您想要观察的元素。

Answer 4

我建议你覆盖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
});

Answer 5

只是一个概念证明：

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

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

用法非常简单，只需在要观察的节点上添加一个新的侦听器，并通常操作类：

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

Answer 6

添加或删除CSS类或定义更改时，

change()不会触发。它会在选择或取消选择选择框值的情况下触发。

我不确定你是否意味着CSS类定义是否已经改变（可以通过编程方式完成但是通常不推荐），或者是否为类添加或删除了类。在任何一种情况下都无法可靠地捕捉到这种情况。

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

或者你可以覆盖/替换jQuery中的addClass()（etc）方法，但这不会捕获何时通过vanilla Javascript完成（虽然我猜你也可以替换这些方法）。

Answer 7

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

A jQuery Plug-in to monitor Html Element CSS Changes by Rick Strahl

从上面引用

手表插件的工作原理是连接到FireFox中的DOMAttrModified，在Internet Explorer中使用onPropertyChanged，或者使用带有的计时器 setInterval用于处理其他浏览器的更改检测。不幸的是，WebKit一直不支持DOMAttrModified 目前Safari和Chrome目前不得不使用较慢的时刻 setInterval机制。

Answer 8

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

//更新具有 required-entry 类的div的任何代码，它位于$ target中比如$ target.addClass（＆＃39; search-class＆＃39;）;

Answer 9

好问题。我正在使用Bootstrap Dropdown菜单，并且需要在隐藏Bootstrap Dropdown时执行事件。打开下拉列表时，类名为“button-group”的包含div会添加一个“open”类;并且按钮本身具有设置为true的“aria-expanded”属性。关闭下拉列表时，将从包含div中删除该类“open”，并将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检测开放或关闭事件会发现这有用。像我一样，他们可能最初只是试图检测元素类的变化（显然不是那么简单）。感谢。

Answer 10

如果您需要触发特定事件，可以覆盖方法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
    // ...
});

Answer 11

您可以绑定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');
  });
});

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

Answer 12

如果您知道哪个事件首先改变了该类，您可能会对同一事件稍微延迟并检查该类。示例

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

http://jsfiddle.net/GuDCp/3/

Answer 13

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

jQuery - 如果CSS类发生更改，则为Fire事件

13 个答案: