При изменении класса событие не возникает. Альтернативой является создание события вручную при программном изменении класса:
$someElement.on('event', function() {
$('#myDiv').addClass('submission-ok').trigger('classChange');
});
$('#myDiv').on('classChange', function() {
});
ОБНОВИТЬ
Этот вопрос, похоже, собирает некоторых посетителей, поэтому вот обновление с подходом, который можно использовать без необходимости изменять существующий код с помощью нового 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>
Имейте в виду, что MutationObserver
это доступно только для более новых браузеров, в частности Chrome 26, FF 14, IE 11, Opera 15 и Safari 6. Подробнее см. MDN . Если вам нужно поддерживать устаревшие браузеры, вам нужно будет использовать метод, который я описал в моем первом примере.
trigger()
), хотя обратите внимание, что он очень устарел из-за использованияbind()
. Я не уверен, как это «завершает» что-либо,MutationObserver
работающий для меняВы можете заменить исходные функции 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
s, как описано в принятом ответе здесь.Также как пара улучшений этих методов:
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 } }); 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); } }); prevClasses != this.getAttribute('class') && $this.trigger('classChanged'); }); return this; } })($.fn.removeClass);
С помощью этих функций замены вы можете обрабатывать любой класс, измененный с помощью classChanged, или определенные классы, добавляемые или удаляемые, путем проверки аргумента функции обратного вызова:
$(document).on('classAdded', '#myElement', function(event, className) { if(className == "something") { /* do something */ } });
источник
$(parent_selector).on('classChanged', target_selector, function(){ /*...*/ });
. Мне потребовалось время, чтобы понять, почему мои динамически созданные элементы не запускают обработчик. См. Learn.jquery.com/events/event-delegationИспользуйте,
trigger
чтобы запустить собственное мероприятие. Когда вы меняете класс, добавляйте триггер с именемJS Fiddle ДЕМО
$("#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 });
но в противном случае нет предопределенной функции, которая запускала бы событие при изменении класса.
Подробнее о триггерах здесь
источник