title: Get id of dynamic added element in onclick
body: <p>There is a function that is created a html elements on page when document is ready. I have to create <code>onclick()</code> event on that elements and use there an element id.</p>
  
  <p>My code is:</p>
  
  <pre><code>$('document').ready(function(){
      addNewElementToContainer();
  });
  
  function addNewElementToContainer(){
   $("#myContainer").append('&lt;div onclick="myClickEvent(this.id)" value="1" &gt;Click me&lt;/div&gt;');
  }
  
  function myClickEvent(id){
      alert("ID: " + id);
  }
  </code></pre>
  
  <p>The <code>id</code> is set correctly (check it on page inspector) but the result is wrong -  <code>"ID: "</code>. So it looks like the id is empty.</p>
  
  <p>How is it possible to solve that problem?</p>
  
  <p>@UPDATE
  Html file is:</p>
  
  <pre><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="myContainer"&gt;&lt;div&gt;
      &lt;/body&gt;
  
      &lt;script&gt;
          $('document').ready(function(){
              addNewElementToContainer();
          });
          function addNewElementToContainer(){
              $("#myContainer").append('&lt;div onclick="myClickEvent(this.id)" value="1" &gt;Click me&lt;/div&gt;');
          }
          function myClickEvent(id){
              alert("ID: " + id);
          }
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>