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

Ответ 1

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

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

Ответ 2

Вы можете заменить исходные функции 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(){ /*...*/ });

Ответ 3

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

JS Fiddle DEMO

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

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

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

Узнать jQuery: Простой и легкий блог jQuery tutorials

Ответ 4

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

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

$(Selector).trigger('ClassChanged')

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

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

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