Почему jQuery не выбирает по селектору после обновления класса?

Question

[Евгений]

Подскажите что делаю не так.
По клику, срабатывает функция по селектору класса и у объекта подменяется этот класс на другой. После кликаю по этому же объекту, но срабатывает функция изначально класса.

Пример вот тут:
jsfiddle.net/atach/u8w1xos6

Answer 1

[Алексей Уколов]

Обработчики событий устанавливаются только на те элементы, которые были на странице в тот момент. В момент инициализации обработчиков на странице нет элемента с классом "class2" (он появится в неопределенном будущем, после клика по ".class1") - обработчик не установился.
Для того, чтобы обрабатывать события на динамически добавляемых элементах, необходимо делегировать эту обработку какому-то неизменяемому родителю:

$(document).on('click', '.class1', function() {
	alert("click .class1");		
    $(this).removeClass("class1").addClass("class2");
});

$(document).on('click', '.class2', function() {
	alert("click .class2");		
    $(this).removeClass("class2").addClass("class1");
});

А вообще, ваш код можно упростить:

$(document).on('click', '.class1, .class2', function() {
    $(this).toggleClass("class1").toggleClass("class2");
});

Comments

[Евгений]

А можете подсказать не знающему человеку на будущее, почему выбирать объект надо через:
$(document).on('click', '.class1', function()

[Ivanq]

Евгений: on - как вы сами понимаете, устанавливает обработчик. On вызывается на document, так как ловим мы событие на всем документе. Дальше, событие - click. .class1 и .class2 - тип элементов, при которых выполняется функция-обработчик. Грубо говоря, мы ловим событие на всем экране, а обрабатываем только если элемент принадлежит селектору.

Answer 2

[Борис Шепелев]

Установка умного обработчика событий! .live()
Устанавливает обработчик событий на выбранные элементы страницы. Метод имеет одну важную особенность, если на страницу будут вставлены новые элементы, которые соответствуют текущему селектору, то они также будут реагировать на заданные события.

Просто говоря! если элемент отсутствовал на странице, но появится в процессе, то он станет рабочим:)

Пример:

$('.foo').live('click', function(){
      alert('Вы нажали на элемент "foo"');
});

Comments

[Александр Таратин]

Не рекомендован с 1.7. Удален в 1.9 (из-за низкой производительности). Не вводите человека в заблуждение.

[Борис Шепелев]

Согласен! недосмотрел. on() - стал более стандартизированным в новой ветке фрейморка jquery