jquery function stops working at the top of the page
<p>I have a jquery function that acts on a click event of a list item:</p>

<pre><code>&lt;ul id="HowDoICategory"  class=" notranslate"&gt;
    &lt;li class="HowDoIItem" id="item1"&gt;
     Register with the surgery
    &lt;/li&gt;
    &lt;li class="HowDoIItem" id="item2"&gt;
     Order a prescription&lt;/li&gt;
    &lt;li class="HowDoIItem" id="item3"&gt;
     Book an appointment&lt;/li&gt;
    &lt;li class="HowDoIItem" id="item4"&gt;
     Request a home visit&lt;/li&gt;
    &lt;li class="HowDoIItem" id="item5"&gt;
     Change my contact details&lt;/li&gt;
    &lt;li class="HowDoIItem" id="item6"&gt;
     Speak to a doctor/nurse&lt;/li&gt;
    &lt;li class="HowDoIItem" id="item7"&gt;
     Get my test results&lt;/li&gt; 
&lt;/ul&gt; 
&lt;script type="text/javascript"&gt;
$("li.HowDoIItem").click(function(){
  //do something
});
&lt;/script&gt;
</code></pre>

<p>When the script is at the bottom of the page this works.  However I want to move this into a separate file and reference at the top the page but this makes the click event stop working.</p>

<p>I've tried to put the javascript in a document ready function so it becomes:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){ 
  $("li.HowDoIItem").click(function(){
    //do something
  });
});
&lt;/script&gt;
</code></pre>

<p>but this doesn't work either.</p>

<p>Can someone explain what is happening here?
Thanks.</p>
