單擊功能不適用於第二次單擊

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;
嘗試刪除它，它對我有用。