jquery function stops working at the top of the page

I have a jquery function that acts on a click event of a list item:

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

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.

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

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

but this doesn't work either.

Can someone explain what is happening here? Thanks.

My only guess would be that you moved it too far up top, and you're referencing $ for your document.ready handler before jQuery is included in the page. Make sure to always have your code that relies on jQuery (external file or not) included after jQuery in the page.