title: Dynamic Class Added By JQuery Not Triggering Click Event
body: <p>I am trying to do the following:</p>
  
  <ol>
  <li>Open an overlay by clicking on a div (This works)</li>
  <li>Close the overlay by clicking on the same div (This doesn't work)</li>
  </ol>
  
  <p>I'm inserting a class via JQuery after the first click and am trying to use that class to close the overlay.</p>
  
  <p>I saw that dynamically generated classes need to use the .on() method in order for the click to work.</p>
  
  <p>Please see code and the fiddle link that I have created below:</p>
  
  <pre><code>$("#nav-icon").click(function() {
  
      $(this).toggleClass('open');            
      $(".overlay").fadeIn(800);  
  
  });
  
  $('#nav-icon').on('click', '.open', function() {
  
      $(".overlay").fadeOut(800);
  
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/oxd8k1nx/1/" rel="nofollow noreferrer">https://jsfiddle.net/oxd8k1nx/1/</a></p>
  
  <p>Can anyone tell me what I'm doing wrong here please.</p>
  
  <p>All help and time greatly appreciated.</p>