title: contenteditable injected in the DOM is not working
body: <p>I created an editable field based on &quot;contenteditable=&quot;true&quot; and it is working well. Content is saved to the database when the user clicks out of the div (blur).</p>
  <p>However, when I inject an additional field with Jquery after the first one, the new field does not send content to the database when the user clicks out of the div.</p>
  <p>I reproduced the problem in this snippet (see the console).</p>
  <p>Any clue ?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
  
      codetoinject = '&lt;div contenteditable="true"&gt;Editable text 2&lt;/div&gt;'
  
  
      $(document).on("click", "#abutton", function (event) {
          console.log("Ok");
          $('#receptionarea').append(codetoinject);   
      })
  })
  
  
  $('.editablediv').blur(function () {
         console.log("save content with Ajax");
         // Ajax code
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#abutton {
    cursor: pointer;
    border: solid;
    width: 120px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="abutton"&gt;
  Click here
  &lt;/div&gt;
  
  &lt;div id="receptionarea"&gt;
  
  &lt;div class="editablediv" contenteditable="true"&gt;Editable text 1&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>