jQuery .click() doesn't work offline?

Question

Hi everyone,

I've bind .click events on some section headers, so that when a user clicks on one of those headers, the section appears/disappears.

So far so good, but for some reason, when I go offline, that doesn't work anymore.

I don't understand such a behaviour, could anyone enlighten me?

Here's the code:

<script src="jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>

    <script>
    $(function(){

    $("#contactInfoHeader").click(function(){
        if($("#contactInformation").is(":visible")){        
            $("#contactInformation").fadeOut();
        }else{  
            $("#contactInformation").fadeIn();
        }   
        resizeWidget();
    });

    });
    </script>

    <h3 id="contactInfoHeader">Contact Information</h3>
    <div id="contactInformation">Telephone:XXXXXX</div>

Answer 1

You have some code inconsistency, or you're mistaken it works.

That should be in document.ready, as well:

$(function() {
/* your code */
});

Otherwise it doesn't attach the click event to anything, since the element is not there at runtime.

Answer 2

in jQuery 1.4.x you should use this format for attaching handlers to the ready event.

$(document).ready(function(){
  //add your stuff here
});

or your can keep the $(handler); syntax, but you'll need the closing paren.

<script>
$(function(){

  $("#contactInfoHeader").click(function(){
      if($("#contactInformation").is(":visible")){        
          $("#contactInformation").fadeOut();
      }else{  
          $("#contactInformation").fadeIn();
      }   
      resizeWidget();
  });

});//ADDED ")" here!
</script>