DOM中注入的contenteditable无法正常工作

Paul Noon 发表于 Dev

保罗·正午

我创建了一个基于“ 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>

斯科特·马库斯（Scott Marcus）

该.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。