好问题。我正在使用引导下拉菜单，需要在引导下拉菜单被隐藏时执行一个事件。当打开下拉菜单时，包含类名为“button-group”的div会添加一个类名为“open”;按钮本身有一个“aria-expanded”属性设置为true。当下拉菜单关闭时，“open”类将从包含的div中删除，aria-expanded将从true切换为false。

这让我想到了一个问题，如何检测类的变化。

使用Bootstrap，可以检测到“下拉事件”。在这个链接中寻找“下拉事件”。 http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

下面是在引导下拉列表中使用此事件的快速示例。

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

现在我意识到这比被问到的一般问题更具体。但我想其他试图用Bootstrap下拉菜单检测打开或关闭事件的开发人员会发现这很有帮助。像我一样，他们最初可能只是尝试检测元素类的变化(这显然不是那么简单)。谢谢。

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

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

好问题。我正在使用引导下拉菜单，需要在引导下拉菜单被隐藏时执行一个事件。当打开下拉菜单时，包含类名为“button-group”的div会添加一个类名为“open”;按钮本身有一个“aria-expanded”属性设置为true。当下拉菜单关闭时，“open”类将从包含的div中删除，aria-expanded将从true切换为false。

这让我想到了一个问题，如何检测类的变化。

使用Bootstrap，可以检测到“下拉事件”。在这个链接中寻找“下拉事件”。 http://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

下面是在引导下拉列表中使用此事件的快速示例。

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

现在我意识到这比被问到的一般问题更具体。但我想其他试图用Bootstrap下拉菜单检测打开或关闭事件的开发人员会发现这很有帮助。像我一样，他们最初可能只是尝试检测元素类的变化(这显然不是那么简单)。谢谢。

无论何时在脚本中更改类，都可以使用触发器来引发自己的事件。

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

但除此之外，没有固定的方法在类更改时触发事件。Change()仅在focus离开输入已被更改的输入后触发。

$(函数(){ Var按钮= $('.clickme') ， box = $('.box') ； 按钮。On('点击'，函数(){ box.removeClass(盒); $(文档).trigger(“buttonClick”); })； 美元(文档)。on('buttonClick'，函数(){ box.text(“点击!”); })； })； .box {background-color:红色;｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < div class = "盒子" >嗨< / div > <button class="clickme">点击我</button>

jQuery触发器的更多信息

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

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