jQuery没有为具有新id的新元素执行代码

jQuery not executing code for new element with new id

本文关键字：元素 执行 代码 新元素 id jQuery      更新时间：2024-04-01

我有一个图像，当我点击它时，我希望它更改为另一个图像并更改其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的元素在单击图像之前不存在

谢谢。

您正在处理的元素总是相同的。。。

$(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")
      ;
    })
    ;
});

我认为您的问题选择了糟糕的解决方案。1） 为什么您的代码不起作用：加载文档时，您只绑定了1次2个事件。因此，jquery找到#name_edit元素并在其上绑定onclick事件。但jquery找不到#name_confirm元素，因为它在文档中不存在）在代码中，您应该绑定1个onclick事件，但有一些attr（例如用于检查状态的类）。类似于：

 <img id="main_image" class="name_edit"/>
 <script>
 var img_paths = ["img/tick.png", "img/edit.png"]
 var img_index = 0;
 $("#main_image").click(function(){
    if($(this).attr("class") == "name_edit"){
       $(this).attr("src", "img/tick.png");
       $(this).attr("class","name_confirm"); 
    }
    else{   
       $(this).attr("src", "img/edit.png");
       $(this).attr("class","name_edit");
    }
 });
 </script>
  1. 其他解决方案：您可以创建2个图像并显示/隐藏它们。或者使用具有背景属性的样式。带有伪类或类。您还可以将图像路径存储在数组中，并在单击时勾选数组索引

类似于：

 var img_paths = ["/content/img1.png", "/content/img2.png"]
 var img_index = 0;
 $("#main_image").click(function(){
    $(this).src = img_paths[img_index];
    img_index = !img_index;
 })

它不起作用，因为你引用了相同的元素，试试这个：

(function(window, document, $, undefined){
  $("#name_edit").on("click", function(){
    var self = $(this);
    if(self.attr("id") === "name_edit") {
      self.attr("src", "img/tick.png");
      self.attr("id", "name_confirm");
    } else {
      self.attr("src", "img/edit.png");
      self.attr("id", "name_edit");
    }
  });
})(this, this.document, jQuery);

为了更容易理解代码，您可以使用这样的类：

(function(window, document, $, undefined){
  $(".name_edit").on("click", function(){
    var self = $(this);
    if(self.hasClass("name_edit")) {
      self.attr("src", "img/tick.png");
      self.removeClass("name_edit").addClass("name_confirm");
    } else {
      self.attr("src", "img/edit.png");
      self.removeClass("name_confirm").addClass("name_edit");
    }
  });
})(this, this.document, jQuery);

为了简化替换类，您甚至可以添加自己的$.fn.replaceClass();，如下所示：

jQuery.fn.replaceClass = function(classA, classB) {
  this.removeClass(classA).addClass(classB);
  return this;
};

然后这样使用：

(function(window, document, $, undefined){
  $(".name_edit").on("click", function(){
    var self = $(this);
    if(self.hasClass("name_edit")) {
      self.attr("src", "img/tick.png");
      self.replaceClass("name_edit", "name_confirm");
    } else {
      self.attr("src", "img/edit.png");
      self.replaceClass("name_confirm", "name_edit");
    }
  });
})(this, this.document, jQuery);

我可以确认其他人说了什么。。jquery在准备好文档的情况下运行，但随后不会更新，因此它基本上从dom中获取正确的元素，并分配click事件。它没有name_confirm的事件。

所以这个代码什么都不做。。。

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

在这个有指导意义的jsfiddle 中看它不起作用

id当然需要更改吗？例如，是否可以为img使用特定的类？然后您可以在类上进行第二次单击绑定。。。例如，请参阅这个工作示例，它仍然更改src和id…

Try-On方法：

$(document).on('click', '#name_edit', function(){
    $(this).attr("src", "img/tick.png");
    $(this).attr("id","name_confirm");
});
$(document).on('click', '#name_confirm', function(){
    $(this).attr("src", "img/edit.png");
    $(this).attr("id","name_edit");
});
相关文章：