javascript - jQuery 不执行具有新 id 的新元素的代码

Question

我有一个图像，当我单击它时，我希望它更改为不同的图像并更改其 ID。然后，当我单击这个新图像时，它会恢复原状。

$(document).ready(function(){
    $("#name_edit").click(function(){
        $(this).attr("src", "img/tick.png");
        $(this).attr("id","name_confirm");
    });
    $("#name_confirm").click(function(){
        $(this).attr("src", "img/edit.png");
        $(this).attr("id","name_edit");
    });
});

我已经成功完成了第一步，从#name_edit到#name_confirm。然而，事实并非如此。

我该如何解决这个问题？

我怀疑，由于我正在使用 (document).ready，jQuery 正在为页面上已有的元素做好准备。但是，在单击图像之前，ID 为 name_confirm 的元素并不存在。

谢谢。

Answer 1

您正在处理的元素始终相同...

$(document).ready(function(){

    // use just the first id value to find it in the DOM
    $("#name_edit").click(function(){
      var item = $(this);
      var id = item.attr('id');
      
      if(id === 'name_edit') {
        return item
          .attr("src", "img/tick.png")
          .attr("id","name_confirm")
        ;
      }
    
      
      return item
        .attr("src", "img/edit.png")
        .attr("id","name_edit")
      ;
    })
    ;
});