如果使用jQuery添加或更改CSS类,如何触发事件? CSS类的变化是否会触发jQuery change()事件?


当前回答

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

一个jQuery插件来监视Html元素CSS的变化

从上面引用

手表插件通过连接到FireFox中的DOMAttrModified来工作, 到onPropertyChanged在Internet Explorer,或通过使用计时器与 setInterval来处理对其他浏览器更改的检测。 不幸的是,WebKit不支持DOMAttrModified一致在 目前,Safari和Chrome不得不使用较慢的速度 setInterval机制。

其他回答

change()在添加或删除CSS类或定义更改时不会触发。它会在选择框值被选中或未选中等情况下触发。

我不确定你的意思是如果CSS类定义被改变(这可以通过编程来完成,但很乏味,通常不推荐),或者如果一个类被添加或删除到一个元素。在这两种情况下,都没有办法可靠地捕捉到这种情况。

当然,您可以为此创建自己的事件,但这只能被描述为建议。它不会捕获不是你的代码。

或者,你可以覆盖/替换addClass()(等)方法在jQuery,但这不会捕获当它是通过香草Javascript(虽然我猜你可以替换这些方法太)。

如果您知道是什么事件首先改变了类,那么您可以对同一事件使用轻微的延迟,并检查类。 例子

//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/

您可以绑定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/

依我看,更好的解决方案是结合@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函数。你可以这样做:

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