Slide Menu - Click div to close not working on a certain div
<p>I'm trying to build a slide menu that (a) opens, places a white faded overlay over the rest of the page and (b) closes when I click a link in the menu or when I click anywhere the white overlay.</p>

<p>(a) this works fine. 
(b) Here is where I have the problem. I get the menu to close on a link in the menu, and on the cross icon.</p>

<p>I don't get it to close on the appended div.</p>

<p>That's the jQuery (which surely could be smoother somehow). </p>

<pre><code>$(".menu").click( function (){
  $('.slide-menu').slideDown();
  if ( $('#container').hasClass('with-overlay') ) {
    $('.bg-overlay').show();
  }
  else {
    $('#container').prepend('&lt;div class="bg-overlay"&gt;&lt;/div&gt;').addClass('with-overlay');  
  }
});

$(".close-trigger").click( function (){
  $('.slide-menu').slideUp();
  $('.bg-overlay').hide();
});

$(".bg-overlay").click( function (){
  $('.slide-menu').slideUp();
  $('.bg-overlay').hide();
});
</code></pre>

<p>What am I missing?</p>