javascript - 我无法使用 jquery 再次更改 id

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 时)，则不会附加任何监听器。

对于您的情况，如果您想做这样的事情，您可以使用事件委托(delegate)，以便监听器附加到容器:

$(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>