Проблема с обновлением идентификаторов и обработчиков событий jQuery

Question

Я пытаюсь сделать какую-то форму, но я застрял, переходя к третьему шагу.

Моя следующая кнопка имеет такой ID:

$('#to-q-2').click(function (e) {
    e.preventDefault();
    $(this).attr("id", "to-q-3");
})

Таким образом, идентификатор обновляется. Но когда я нажимаю снова:

$('#to-q-3').click(function(e) {
        e.preventDefault();
        alert('stop');
});

Ничего не произошло. Я думаю, jQuery не обновлял DOM, но я понятия не имею, как это сделать. Любая подсказка?

Answer 1

Вам нужно добавить событие клика в document так что он может искать новые элементы, которые не присутствовали при начальной привязке click событие, таким образом, вы можете добавить события клика для динамически добавленных элементов. Вы можете сделать это используя:

$(document).on('click', '#to-q-3', function() {...})

Смотрите рабочий пример ниже:

$(document).on('click', '#to-q-2', function (e) {
    e.preventDefault();
    $(this).attr("id", "to-q-3");
});

$(document).on('click', '#to-q-3', function(e) {
  e.preventDefault();
  alert("stop");
});

#to-q-2 {
  color: red;
}

#to-q-3 {
  color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="to-q-2">Click this div</div>