jQuery not executing code for new element with new id

Question

I have an image, and when I click on it I want it to change to a different image and change its ID as well. Then when I click on this new image, it reverts back.

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

I have successfully done the first step, going from #name_edit to #name_confirm. However, not the reverse.

How do I go about solving this?

My suspicion is that since I'm using (document).ready, jQuery is preparing itself for elements already on the page. However, the element with the ID name_confirm does not exist until the image is clicked on.

Thanks.

Answer 1

The element that you are working on is always the same...

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

Answer 2

I think you have chosen bad solution for your problem. 1) Why your code doesn't work: You bind 2 events only 1 time, whne your document loaded. So, jquery finds #name_edit element and bind onclick event on it. But jquery cannot find #name_confirm element, because it doesn't exists on document ready) In your code you should bind 1 onclick event, but have some attr (for example class for checking your state). Something like:

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

2. Other solutions: You can create 2 images and show/hide them. Or use styles with background attr. With pseudoclasses or classes. Also you can store image pathes in array and tick array index on click.

Something like:

 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;
 })

Answer 3

It is not working because you are referencing the same elements, try this:

(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);

Also for easier to understand code you could use classes like 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.removeClass("name_edit").addClass("name_confirm");
    } else {
      self.attr("src", "img/edit.png");
      self.removeClass("name_confirm").addClass("name_edit");
    }
  });
})(this, this.document, jQuery);

To simplify replacing classes you could even add your own $.fn.replaceClass(); like this:

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

Then use it like 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);

Answer 4

I can confirm what the others said.. the jquery gets run on document ready, but doesn't get updated subsequently - so it basically gets the correct element from the dom, and assigns the click event. It has no event for the name_confirm.

so this code does nothing...

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

See it not work in this instructive jsfiddle

Of course does the id need to change? is it possible to use for example a specific class for the img? then you could make the second click bind on the class instead... for example see this working example, which still changes the src and id...

Answer 5

Try On method:

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