在 DOM 中注入的 contenteditable 无效

Question

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

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

我在此片段中重现了该问题（请参阅控制台）。

有什么线索吗？

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

Answer 1

.blur 函数仅应用于具有 editablediv class 的元素，您不会将其应用到动态添加的 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>

在 DOM 中注入的 contenteditable 无效

contenteditable injected in the DOM is not working

javascript

jquery

contenteditable