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

DEMO from codepen.io

修改：

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

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

DEMO from 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;
尝试删除它，它对我有用。

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

3 个答案: