Я не могу изменить идентификатор во второй раз с jquery

Question

Я пытаюсь изменить id элемента. Он работает в первый раз, но не во второй раз.

HTML:

<span id="1">trying to change the id after multiple clic</span>

Jquery:

jQuery( "#1").click(function() {
    $("#1").text("we change the id to 2");
    jQuery("#1").attr("id","2")
    console.log('id 1 clicked');
});


jQuery( "#2").click(function() {
    // it nevers goes there
    $("#2").text("we change the id to 3");
    jQuery("#2").attr("id","3")
    console.log('id 2 clicked');
});

вот это jsfiddle :

Спасибо всем за помощь

Answer 1

Когда вы вызываете .click для элемента, элемент, который был просто выбран (здесь #1 или #2), подключит слушателя к нему. Если элемент не существует во время выполнения этой строки (например, когда вы пытаетесь присоединиться к #2), слушатель не будет подключен.

Для вашей ситуации, если вы хотите сделать что-то подобное, вы вместо этого может использовать делегирование событий, чтобы слушатели были подключены к контейнеру :

$(document).on('click', "#1", function() {
  $("#1").text("we change the id to 2");
  $("#1").attr("id", "2")
  console.log('id 1 clicked');
});


$(document).on('click', "#2", function() {
  $("#2").text("we change the id to 3");
  $("#2").attr("id", "3")
  console.log('id 2 clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="1">trying to change the id after multiple clic</span>

Другой вариант - сохранить текущий счетчик в переменной, а не в DOM:

const $span = $('span');
const texts = {
  2: "click 2",
  3: "click 3"
};
let count = 1;
$span.on('click', () => {
  count++;
  console.log('click', count);
  $span.text(texts[count]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>trying to change the id after multiple clic</span>

Answer 2

Вам нужно будет написать свой код, который меняет идентификатор с 2 на 3, внутри кода, который меняет идентификатор с 1 на 2

Вот так

jQuery( "#1").click(function() {
$("#1").text("we change the id to 2");
jQuery("#1").attr("id","2")
console.log('id 1 clicked');

jQuery( "#2").click(function() {
// it nevers goes there
$("#2").text("we change the id to 3");
jQuery("#2").attr("id","3")
console.log('id 2 clicked');

});

});

Причина в том, что когда вы пишете код снаружи, он запускается при инициализации dom, и в то время элемент с идентификатором 2 отсутствует, поэтому на код это не влияет