单击功能不适用于第二次单击

Question

I have one problem with my code. I have created this DEMO from codepen.io

In this demo you can see there are two edit button. When you click first edit button then the edit textarea will be on there. The problem is here if you click the blue cancel button and click again first edit button it is not working. What is the problem here? Anyone can help me in this regard ?

JS

$(document).ready(function() {
   $("body").on("click", ".editBtn", function(event) {
      event.target.disabled = true;
      var ID = $(this).attr("id");
      var currentMessage = $("#messageB" + ID + " .postInfo").html();
      var editMarkUp = '<div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="'+ ID +'">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>';
      $("#messageB" + ID + " .postInfo").html(editMarkUp);
      var data = $('#txtmessage_' + ID).val();
       $('#txtmessage_' + ID).focus();
       $('#txtmessage_' + ID).val(data + ' ');
   });
   $("body").on("click", ".cNeD", function(event) {
      event.target.disabled = false;
        var ID = $(this).attr("id");
        var currentMessageText = $("#txtmessage_" + ID).html();
        $("#messageB" + ID + " .postInfo").html(currentMessageText);
    });
});

HTML

<div class="container">
   <div class="postAr" id="messageB1">
      <div class="postInfo">
         fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsa
      </div>
      <div class="editBtn" name="edit" id="1">Edit1</div>
   </div>
</div>
<div class="container">
   <div class="postAr" id="messageB2">
      <div class="postInfo">
         fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsassss
      </div>
      <div class="editBtn" name="edit" id="2">Edit2</div>
   </div>
</div>

Answer 1

Because the Edit button is disabled with :

event.target.disabled = true;

You can add in the .cNeD click event :

$(".editBtn").prop('disabled', false);

DEMO from codepen.io

Edit :

To enable only one edit button (see u_mulder comment):

$(this).closest('.container').find(".editBtn").prop('disabled', false);

DEMO from codepen.io

Answer 2

In your code for handling the cancel button click, you're setting the disabled attribute to false for the cancel button . As it is, this way of doing it is kind of ugly, and I couldn't get it to work. I did get it to work like this:

ie,

$(document).ready(function() {
  $("body").on("click", ".editBtn", function(event) {
// changed to disable event handler          
    $(this).off('click'); 
// rest of code
  });
  $("body").on("click", ".cNeD", function(event) {
// changed to re-enable event handler for the edit button in question
    $(this).siblings('.editBtn').on('click'); 
// rest of code
  });
});

Answer 3

The problem is coming from event.target.disabled = true;
Try removing it, it worked for me.