fonction jquery cesse de fonctionner en haut de la page

Question

J'ai une fonction jquery qui agit sur un événement de clic d'un élément de la liste:

<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> 

Lorsque le script est en bas de la page cela fonctionne. Cependant, je veux déplacer cela dans un fichier séparé et référence en haut de la page, mais cela fait cesser l'événement de clic.

J'ai essayé de mettre le javascript dans un document prêt fonction il devient:

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

mais cela ne fonctionne pas non plus.

Quelqu'un peut-il expliquer ce qui se passe ici? Merci.

Answer 1

Ma seule supposition serait que vous l'avez déplacé trop loin en haut, et vous faites référence $ pour votre gestionnaire document.readyavant jQuery est inclus dans la page. Assurez-vous de toujours avoir votre code qui repose sur jQuery (fichier externe ou non) inclus après jQuery dans la page.