jQuery - how to have the fadeOut() button inside an element that is hidden on page load?

I have two simple scripts, the first shows a div when clicked. Inside that div is a close button (very basic modal window). The qrTooltip div is hidden by default, with display:none. I can get it to show fine, but the close function doesn't work. I am assuming this is because the markup has to be present when the page loads for jQuery to do it's thing, and because the div is hidden it never adds the jQuery code to the anchor.

Is there any simple way around this?

<script language="javascript">
$('#btnQr').click(function() {
    $('#qrTooltip').fadeToggle('fast', function () {
    // Animation complete
  });
});开发者_如何学Python
</script>

   <script language="javascript">
    $('#btnQrClose').click(function() {
        $('#qrTooltip').fadeOut('fast', function () {
        // Animation complete
      });
    });
    </script>

<a href="#" id="btnQr">show</a>


<div id="qrTooltip">
<a href="#" id="btnQrClose">hide</a>
</div>

It's because your Javascript is being evaluated before the button exists. Try something like this:

<script language="javascript">
$(function(){
   $('#btnQrClose').click(function() {
       $('#qrTooltip').fadeOut('fast', function () {
           // Animation complete
       });
    });
});
</script>

use jQuery .live() event. See here: http://api.jquery.com/live/