Setting div to empty and more...

Setting div to empty and more...

Something new to me. 

I have <div id="div1"></div>

Using jQuery ajax, I populate the div. 

Part of that population includes

 <button ID="Close" value="Close">Close</button> 

The script for the page includes: 

<script>
$(document).ready(function(){

 $("#Close").click(function(){
  
       $("#div1").empty();
    });
});
</script>

The idea of this was to set the contents of div1 to empty. I need the contents of div1 to disappear from the page. 

But when I click the close button, nothing happens. It's as if the click function does not fire the JS. 

On the other hand, if I put the same button in the footer of the page, it works perfectly. So I know that .empty works. So It's like the stuff that comes into the page using Jquery Ajax, really isn't part of the page. 

Is there some kind of call I am supposed to add when I populate #div1 so that whatever is in this div is recognized. This is pretty important because the next challenge I need to overcome is to set up within #div1 an insert via jQuery that also empties the contents of #div1. 

So fill #div1 with a form, enter the information from the form and then close (empty) #div1. 

Thanks for helping me out. 

M