Question

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
  });
});
</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>

Answer 1

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>