Почему не работает скрипт?

Question

[Stalker_darkway]

Всем привет!

$('.inout').click(function(){
		$('.inout').addClass('inout-act').removeClass('inout');
		//$('.calendar-wrapper').css('width', '27%');
		//$('.calendar-wrapper').css('transition', '1s');
	});
	
	$('.inout-act').click(function(){
		//$('.calendar-wrapper').css('width', '1%');
		//$('.calendar-wrapper').css('transition', '1s');
		$('.inout-act').addClass('inout').removeClass('inout-act');
	});

Класс inout удаляется, класс inout-act добавляется при клике 1 раз.
Класс inout-act не удаляется и класс inout не добавляется при клике второй раз.

Answer 1

[Денис Инешин]

1. Не нужно заменять класс на другой. Нужно добавлять модификатор: inout и inout active
2. Нужно использовать toggleClass
3. Нельзя навешивать обработчик на элемент, которого еще не существует.

В общем это делается так: jsfiddle.net/IonDen/fx94q077

$(".inout").on("click", function () {
    $(this).toggleClass("active");
});

Comments

[Lynn «Кофеман»]

3. Можно, но не таким способом

[Евгений Петров]

Алексей Тен: Зарегистрировать слушатель события в несуществующем элементе невозможно. Никаким способом.

[Lynn «Кофеман»]

Евгений Петров:

$(document).on('click', '.inout-act', function(){...})

[Евгений Петров]

Алексей Тен: Вы установили слушатель в узле document. А в несуществующем узле слушатель зарегистрировать невозможно. Никаким способом.

[Lynn «Кофеман»]

Евгений Петров: Ну если подходить так формально, то конечно невозможно.
Формально это обратотчик на документе, но практически это то, что нужно автору. Хотя понимать разницу разумеется полезно.

[Евгений Петров]

Алексей Тен: Пример с document — это делегирование. Но это — вовсе не слушатель в целевом узле. И замечание могло звучать так: «Зарегистрировать слушатель в несуществующем узле невозможно, но для всплывающих событий это и не нужно — есть делегирование».

Answer 2

[Abdula Magomedov]

Используй метод on(). Изначально у элемента нет класса inout-act, соответственно на него не вешается событие.
И еще, удалением класса у элемента ты с него событие не снимешь. А метод on() ставит событие на какой-нибудь родительский элемент, который будет хватать событие и смотреть кто его с генерировал. Тогда у тебя будут работать классы.