title: jquery listen to click event on dynamically created element
body: <p>I need to create a modal for html page. When a button on the page is clicked, the modals shows up. Button to close modal contains in the modal itself.</p>
  
  <p>The problem is that click event on close button, that meant to remove a modal html from document, is not working. However, <code>console.log</code> assigned to the same event show up in console. Why is that happening and how to fix it?</p>
  
  <p>Pen: <a href="https://codepen.io/t411tocreate/pen/prZRYN" rel="nofollow noreferrer">https://codepen.io/t411tocreate/pen/prZRYN</a></p>
  
  <p>Js code:</p>
  
  <pre><code>$(document).ready(function(){
    $('#showModal').on('click', function() {
      $('.container').append(modalHtml)
    })
  
    $(document).on('click','#closeModal',function(){
      console.log('click triggered')
      $(document).remove('#modal')
   })
  
    var modalHtml = '&lt;div id="modal"&gt; &lt;div class="modal-bg"&gt;&lt;/div&gt;&lt;div class="modal-content"&gt; &lt;p&gt;this is a modal&lt;/p&gt;&lt;span id="closeModal"&gt;close&lt;/span&gt; &lt;/div&gt;&lt;/div&gt;'
  })
  </code></pre>