在 DOM 中注入的 contenteditable 不起作用答案

【问题标题】：contenteditable injected in the DOM is not working在 DOM 中注入的 contenteditable 不起作用
【发布时间】：2021-05-29 07:11:33
【问题描述】：

我创建了一个基于“contenteditable="true" 的可编辑字段，它运行良好。当用户点击 div（模糊）时，内容会保存到数据库中。

但是，当我在第一个字段之后用 Jquery 注入一个附加字段时，当用户单击 div 时，新字段不会将内容发送到数据库。

我在这个 sn-p 中重现了这个问题（见控制台）。

有什么线索吗？

$(document).ready(function () {

    codetoinject = '<div contenteditable="true">Editable text 2</div>'


    $(document).on("click", "#abutton", function (event) {
        console.log("Ok");
        $('#receptionarea').append(codetoinject);   
    })
})


$('.editablediv').blur(function () {
       console.log("save content with Ajax");
       // Ajax code
});

#abutton {
  cursor: pointer;
  border: solid;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="abutton">
Click here
</div>

<div id="receptionarea">

<div class="editablediv" contenteditable="true">Editable text 1</div>

</div>

【问题讨论】：

标签： javascript jquery contenteditable

【解决方案1】：

.blur 函数仅适用于具有editablediv 类的元素，您不会将其赋予动态添加的div。此外，您还需要修改设置 blur 事件处理程序的方式，以将事件委托用于动态添加的元素。

此外，您可以直接在按钮上设置click 事件处理程序。那里不需要使用事件委托。

$(document).ready(function () {
  $('#abutton').on("click", function (event) {
    $("#receptionarea").append('<div contenteditable="true" class="editablediv">Editable text 2</div>');   
  });
 
  // You must set up event delegation for dynamically
  // added elements to get hooked up to events.
  $("div").on("blur",'.editablediv', function () {
    console.log("save content with Ajax");
    // Ajax code
  });
});

#abutton {
  cursor: pointer;
  border: solid;
  width: 120px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="abutton">Click here</div>

<div id="receptionarea">
  <div class="editablediv" contenteditable="true">Editable text 1</div>
</div>

【讨论】：