javascript - 点击功能不适用于第二次点击

Question

我的代码有一个问题。我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到有两个编辑按钮。当您单击第一个编辑按钮时，编辑文本区域将在那里。如果您单击蓝色取消按钮并再次单击第一个编辑按钮，问题就在这里，它不起作用。这里有什么问题？任何人都可以在这方面帮助我吗？

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

因为编辑按钮被禁用了:

event.target.disabled = true;

你可以在.cNeD点击事件中添加:

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

DEMO from codepen.io

编辑:

只启用一个编辑按钮(参见 u_mulder 评论):

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

DEMO from codepen.io