Как сделать смену обработчика jQuery?

Question

[Алексей]

Есть примерно такой код:

$('.btn1').on("click", function()
{
	$(this).removeClass( 'btn1' );
	$(this).addClass( 'btn2' );
	alert(1);
});
	
$('.btn2').on("click", function()
{
	alert(2);
});

При нажатии кнопки срабатывает первая функция, class у элемента меняется, но при повторном клике срабатывает все та же первая функция, а не вторая.

В чем может быть ошибка?

Answer 1

[Александр Хиренко]

Не учитесь у дяди @melnikov_m плохого. Используйте делегированные события там где это необходимо.
Проблема несрабатывания второго события, действительно, заключается в том что Вы навешиваете событие на пока несуществующий элемент .btn2.
В данном же случае Вы можете навесить второе событие внутри первого и в первом использовать one. Но хоть убейте, не пойму зачем Вам это? Можно же все реализовать и в первом.

Comments

[Алексей]

На самом деле событий там не 2, а 4. Получится не очень удобно в плане кода.

[Александр Хиренко]

@karlito опишите вашу задачу в целом и тогда мы Вам чем-то поможем, а то не понятно зачем Вам это.

[Алексей]

Это по сути шаги в регистрации, в каждом новом появляется дополнительное поле ввода и меняется текст кнопки(но это думаю не очень важный момент).

[Александр Хиренко]

@karlito ну на сколько я понял Вам нужно привести в определенное состояние форму при клике на кнопку. Тогда каждый раз создавать событие плохая идея. Верным решением будет хранить состояние в некой переменной state и в зависимости от ее значения при клике делать определенные действия.

[Андрей Ежгуров]

Да, делегирование событий обычно применяется там, где элементы, на которые эти события навешиваются, динамически добавляются удаляются на странице.
И да, в данном случае логичнее использовать флаг состояния.
Но @melnikov_m предложил полностью работающий вариант, а @Satanpit - только рассуждения о том, каким должен быть идеальный работающий вариант.

[Александр Хиренко]

@eandr_67 делегированные события применяются там где нужно навесить событие на большое количество элементов, например когда у вас 1000 строк в табличке и по клике на ячейку вам нужно что-то сделать, а не на динамические элементы. По поводу рассуждений - а что Вы предлагаете писать код за людей? По моему это плохая идея. Ваша логика - лишь бы работало, а что там внутри никого не волнует?

[Андрей Ежгуров]

Но ведь Вы должны понимать, что очевидному новичку невозможно голым текстом - без примеров - объяснить, как именно надо правильно программировать?

[Александр Хиренко]

@eandr_67 почему? Я думаю, человек увидев слово "делегированные" пошел в гугл и узнал что же это и как это использовать, и уже ему +10 к карме. Как поступать в его случае я вроде бы тоже объяснил. А то что я ему напишу готовый код и он его скопипастит и , будьте уверены, не задумается, а что же все таки происходит в этом коде.

Answer 2

[melnikov_m]

Смотри прямую и делегированну обработку jquery.page2page.ru/index.php5/On
У тебя вот так - $('.btn2').on('click', function(){ // обработчик ....
а надо вот так - $('document').on('click', '.btn2', function(){ // обработчик ....

Answer 3

[Виталий Киренков]

codepen.io/vitaliy_kirenkov/pen/DAcKx