如何使用jQuery在类更改上触发事件？
我想有这样的东西：
$('#myDiv').bind('class "submission ok" added'){ alert('class "submission ok" has been added'); }); class级变动时不会引发任何事件。 另一种方法是在编程式更改类时手动引发一个事件：
$someElement.on('event', function() { $('#myDiv').addClass('submission-ok').trigger('classChange'); }); // in another js file, far, far away $('#myDiv').on('classChange', function() { // do stuff });
UPDATE
这个问题似乎正在收集一些访问者，所以这里是一个更新，可以使用的方法，而不必使用新的MutationObserver修改现有的代码：
var $div = $("#foo"); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === "class") { var attributeValue = $(mutation.target).prop(mutation.attributeName); console.log("Class attribute changed to:", attributeValue); } }); }); observer.observe($div[0], { attributes: true }); $div.addClass('red');
.red { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo" class="bar">#foo.bar</div>
你可以用原来的函数replace原来的jQuery addClass和removeClass函数，然后调用原始函数，然后触发你的自定义事件。 （使用自调用匿名函数来包含原始函数引用）
(function( func ) { $.fn.addClass = function() { // replace the existing function on $.fn func.apply( this, arguments ); // invoke the original function this.trigger('classChanged'); // trigger the custom event return this; // retain jQuery chainability } })($.fn.addClass); // pass the original function as an argument (function( func ) { $.fn.removeClass = function() { func.apply( this, arguments ); this.trigger('classChanged'); return this; } })($.fn.removeClass);
那么你的代码的其余部分就会像你期望的那样简单。
$(selector).on('classChanged', function(){ /*...*/ });
使用trigger来激发你自己的事件。 当你改变类添加触发器的名字
JS小提琴演示
$("#main").on('click', function () { $("#chld").addClass("bgcolorRed").trigger("cssFontSet"); }); $('#chld').on('cssFontSet', function () { alert("Red bg set "); });
学习jQuery：简单易用的jQuery教程博客
你可以使用这样的东西：
$(this).addClass('someClass'); $(Selector).trigger('ClassChanged') $(otherSelector).bind('ClassChanged', data, function(){//stuff });
但否则，不，没有预定义的函数来在类更改时触发事件。
在这里阅读更多关于触发器
