javascript不會在新ID上觸發

Question

我是新來的，我正在嘗試為自己編寫一個小工具，但遇到了一個問題。 我已經搜索過，但是找不到合適的解決方案。 我什至知道問題出在哪里，但我不知道如何解決。

我有一個<div> ，它將導致單擊時重命名另一個<div>的id 。 但是之后，具有新id的<div>將無法達到或觸發任何事件。

這是我的問題的代碼示例。

HTML：

<div id="example1">click me</div>
<div id="example2">click me, too.</div>

JS：

$('#example1').click(function () {
  $('#example2').attr('id', 'exampleX');
  console.log("done X");
});


$('#exampleX').click(function () {
  $('this').attr('id', 'example2');
  console.log("undone X");
});

第一個click事件運行良好，但是第二個事件沒有響應，我想這是因為DOM已經加載並且不知道新的<div> 。

我該如何解決？

任何幫助深表感謝 。 謝謝。

編輯：我必須更改id ，因為我構建了一個小工具或游戲，該工具或游戲根據先前單擊的<div>來更改<div>的<img> 。 此時，當帶有占位符<img>的“空白<div> ”更改<img src>並必須將某些信息存儲在val中時，就會出現故障，這不是因為我無法觸發任何事件單擊。 必須更改id才能知道哪些信息需要存儲在var 。

Answer 1

您可以更改您的Jquery代碼。 綁定功能點擊#exampleX改變元素的ID后#exampleX 。

var click_function = function(){
   $('this').attr('id', 'example2');
   console.log("undone X");
};

$('#example1').on("click", function(){
    $('#example2').attr('id', 'exampleX');
    console.log("done X");

    $('#exampleX').off("click").on("click",click_function);
});

這就是您要的。 https://jsfiddle.net/8skz9pwr/2/

更改元素的ID並不是干凈的編碼。 我認為有更好的方法可以達到您的要求，但這可以回答您的問題。