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

Question

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

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

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

来自codepen.io的演示

编辑：

要只启用一个编辑按钮（请参阅u_mulder注释）：

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

来自codepen.io的演示

Answer 2

在您办理取消按钮点击代码，你禁用属性设置为false，取消按钮 。 事实上，这种做法有点难看，我无法让它发挥作用。 我确实让它像这样工作：

即

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

问题来自event.target.disabled = true;
尝试删除它，它对我有用。