Jquery продолжает обрабатывать события для объекта, лишившегося своего старого ID, и получившего новое ID. Как так?

Question

[Юрий Ерусалимский]

Есть <div id="my1">, по событию click (имеет вид $("#my1").click(function(){});) меняю ему ID на "my2" ($("#id").attr("id","my2");). После смены ID имеется событие нажатия на уже новый <div id="my2"> следующего вида - $(document).on("click","#my2", function(){});. Проблема в том, что при этом продолжает срабатывать click по старому ID, по "my1". Как это предотвратить? Ведь ID уже заменён.

Answer 1

[Andrzej Wielski]

Эвент вешается на сам DOM объект, а не на Query Selector.
Поменяв id вы лишь отредактировали объект, но эвенты с него не сняли.

Решение 1: сначала снимайте ваш event с объекта с помощью функции off (Документация), после чего изменяйте его id.

Решение 2: вместо вашей конструкции $("#my1").click(function(){}); используйте конструкцию:

$(document).on('click', '#my1', function(){
   ....
});

Answer 2

[Александр N++]

off().on('click', call); или off('click').on( .. )

Answer 3

[Юрий Ерусалимский]

Сам отвечу на свой вопрос - надо и клик на изначальный ID тоже обрабатывать посредством on. То есть:
$(document).on("click","#my1", function(){});