[英]How to fire an event on class change using jQuery?
我想要類似的東西:
$('#myDiv').bind('class "submission ok" added'){
alert('class "submission ok" has been added');
});
類更改時不會引發任何事件。 另一種方法是在您以編程方式更改類時手動引發事件:
$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 observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { var attributeValue = $(mutation.target).prop(mutation.attributeName); console.log("Class attribute changed to:", attributeValue); }); }); observer.observe($div[0], { attributes: true, attributeFilter: ['class'] }); $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>
請注意, MutationObserver
僅適用於較新的瀏覽器,特別是 Chrome 26、FF 14、IE 11、Opera 15 和 Safari 6。有關詳細信息,請參閱MDN 。 如果您需要支持舊版瀏覽器,則需要使用我在第一個示例中概述的方法。
您可以用您自己的函數替換原始的 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(){ /*...*/ });
更新:
這種方法確實假設類只能通過 jQuery addClass 和 removeClass 方法進行更改。 如果以其他方式修改類(例如通過 DOM 元素直接操作類屬性),則需要使用MutationObserver
之類的東西,如此處接受的答案中所述。
作為對這些方法的一些改進:
為每個添加( 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 } }); if( 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); } }); if( prevClasses != this.getAttribute('class') ) $this.trigger('classChanged'); }); return this; } })($.fn.removeClass);
使用這些替換函數,您可以通過檢查回調函數的參數來處理通過 classChanged 更改的任何類或添加或刪除的特定類:
$(document).on('classAdded', '#myElement', function(event, className) {
if(className == "something") { /* do something */ }
});
使用trigger
您自己的事件。 每當您更改類時,添加帶有名稱的觸發器
$("#main").on('click', function () {
$("#chld").addClass("bgcolorRed").trigger("cssFontSet");
});
$('#chld').on('cssFontSet', function () {
alert("Red bg set ");
});
你可以使用這樣的東西:
$(this).addClass('someClass');
$(Selector).trigger('ClassChanged')
$(otherSelector).bind('ClassChanged', data, function(){//stuff });
但除此之外,不,沒有預定義的函數可以在類更改時觸發事件。
在此處閱讀有關觸發器的更多信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.