Как запустить событие при изменении класса с помощью jQuery?

Ответы:

169

При изменении класса событие не возникает. Альтернативой является создание события вручную при программном изменении класса:

$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) {
    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 . Если вам нужно поддерживать устаревшие браузеры, вам нужно будет использовать метод, который я описал в моем первом примере.

Рори МакКроссан
источник
В завершение этого ответа я нашел следующее: stackoverflow.com/a/1950052/1579667
Бендж
1
@Benj Это то же самое, что и мой исходный ответ (т.е. использование trigger()), хотя обратите внимание, что он очень устарел из-за использования bind(). Я не уверен, как это «завершает» что-либо,
Рори МакКроссан
В моем случае мне нужно было запустить событие, когда у dom-узла есть определенный класс, MutationObserverработающий для меня
Марио
1
Это улучшенная форма этого решения с фильтром stackoverflow.com/a/42121795/12074818
MVDeveloper1
20

Вы можете заменить исходные функции 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), необходимо использовать что-то вроде MutationObservers, как описано в принятом ответе здесь.

Также как пара улучшений этих методов:

  • Запускать событие для каждого добавляемого ( 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 */ }
});
Николас Хук
источник
1
Это работает отлично, но в «остальной части кода» обработчик событий должен быть делегирован целевой селектор , чтобы привязка к новым элементам: $(parent_selector).on('classChanged', target_selector, function(){ /*...*/ });. Мне потребовалось время, чтобы понять, почему мои динамически созданные элементы не запускают обработчик. См. Learn.jquery.com/events/event-delegation
Тимм,
6

Используйте, triggerчтобы запустить собственное мероприятие. Когда вы меняете класс, добавляйте триггер с именем

JS Fiddle ДЕМО

$("#main").on('click', function () {
    $("#chld").addClass("bgcolorRed").trigger("cssFontSet");
});

$('#chld').on('cssFontSet', function () {

    alert("Red bg set ");
});

Изучите jQuery: простой и легкий учебник по jQuery.

Сатиндер Сингх
источник
2

вы можете использовать что-то вроде этого:

$(this).addClass('someClass');

$(Selector).trigger('ClassChanged')

$(otherSelector).bind('ClassChanged', data, function(){//stuff });

но в противном случае нет предопределенной функции, которая запускала бы событие при изменении класса.

Подробнее о триггерах здесь

Глубокая Шарма
источник
1
Обработчик события должен быть тем же элементом, который запускает событие. $ (это) .addClass ('someClass'); $ (Selector) .trigger ('ClassChanged') // Это должен быть тот же Selector $ (Selector) .bind ('ClassChanged', data, function () {// stuff});
Меко Перес Эстевес
3
Кажется, вы скопировали отсюда, если да, то хорошо, если вы также предоставите ссылку stackoverflow.com/questions/1950038/…
Сатиндер Сингх