Pourquoi jQuery cliquez sur ne fonctionne pas lorsqu'il est inclus dans un fichier séparé

Je suis un débutant l'apprentissage de jQuery et de développement web, donc cela peut être une question stupide, mais je ne peux pas trouver une réponse sur Google (sans doute, je ne suis pas à la recherche pour les bons mots clés). J'ai un fichier HTML simple (disons, 'test.html' chargement de jQuery, javascript externe fichier (disons, 'test.js') que j'ai écrit, et disposent d'un bouton. Par exemple,

<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="scripts/test.js" type="text/javascript"></script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>

Dans 'test.js", j'ai:

$( "#my_button" ).click(function() {
    alert('test');
    return false;
});

Mais quand je clique sur le bouton, il ne fonctionne pas. Cependant, quand je mets quoi dans 'test.js " dans". test.html " comme ceci:

<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $( "#my_button" ).click(function() {
        alert('test');
        return false;
    });
});
</script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>

Il fonctionne. La première question est: quelqu'un Peut-il m'expliquer pourquoi ça marcherait quand j'ai insérer le code dans un fichier externe et de le charger? Est-ce toujours nécessaire d'envelopper jQuery avec $(function() {......} pour que cela fonctionne?

Idéalement, je ne veux pas de code javascript dans mon template HTML car il est évidemment désordre. Liés à la seconde question est: Quelle est la meilleure/le meilleur moyen de séparer le javascript/jQuery code comme ci-dessus, et pourtant le faire fonctionner dans le modèle HTML?

Je vous remercie pour votre réponse.

$(function(){}) == $(document).prêt() comme dans les dom éléments ont été chargés et il est sûr pour attacher les auditeurs.
"Ce qui est le plus propre/meilleure façon de séparer le javascript/jQuery code comme ci-dessus, et pourtant le faire fonctionner dans le modèle HTML?" Déplacer les scripts à droite avant la balise body de clôture.
Oui, vous voulez faire cela dans un fichier que vous êtes en train de faire un direct <script> lien vers la. Il y a des circonstances où vous ne l'utilisez pas, mais puisque vous êtes seulement à apprendre, s'en tenir à la mettre autour de toutes les dépendances que vous créez.
Merci à vous tous. @ThinkingSites pourriez-vous svp m'orienter vers une ressource qui explique les circonstances dans lesquelles je ne veux pas l'utiliser?
Oui, cela permettrait de retarder le chargement et l'exécution des scripts, ce qui est précisément ce dont vous avez besoin pour s'exécuter correctement. Sans le déplacer à la clôture de corps ou de liaison à l'événement ready, le script va s'exécuter avant les éléments sont en place(vous ne pouvez pas lier un événement directement pour un élément qui n'existe pas encore). En le déplaçant d'avant la balise de fermeture body peut entraîner dans votre page apparaissant pour charger plus rapidement à l'utilisateur final, car le HTML sera susceptible d'être analysé et rendu avant que le javascript est téléchargé/exécuté.

OriginalL'auteur user1330974 | 2013-07-11

  1. 10

    Vous avez besoin d'avoir $(function() { ... }) pour votre cliquez sur la fonction de travail. Il raconte jquery que le document est chargé et il peut commencer à travailler sur les DOM. Avant cela, le DOM n'est pas prêt et votre élément peut ne pas exister.

    EDIT: Utiliser pour vos fichiers externes, sauf si vous êtes plus avancé et de savoir quand ne PAS l'utiliser.

    Comme je l'ai demandé avant, il serait très utile si vous pouviez lien/expliquer quand je ne dois PAS l'utiliser. Merci @ThinkingSites
    C'est surtout une base de cas par cas et pour une utilisation avancée. Voici quelques-unes: Si vous avez une page unique application qui garantit le prêt a déjà tiré. Si vous avez une autre bibliothèque avec son propre prêt de l'événement que vous utilisez. Si elle fait partie d'une bibliothèque de modules et le module parent appelle déjà. Dans tous ces cas, il est possible d'appeler le document.prêt, puisqu'il ne fait pas de mal quoi que ce soit, mais il ya des chances si vous savez ce que vous faites, il ya des cas où vous pouvez l'ignorer.

    OriginalL'auteur Thinking Sites

  2. 11
    $(document).ready(function() {

    $( "#my_button" ).click(function() {
        alert('test');
        return false;
    });

});
    Je vous remercie. $(document).prêt(....) est beaucoup plus lisible (facile à comprendre) que de simplement $(function() {.....

    OriginalL'auteur simongus

  3. 1

    Événement de liaison sur jquery besoins de l'objet HTML déjà rendus à travailler.

    Si vous dites $('#button').click(function(){dosomething()});
    Vous avez besoin #button existent déjà sur le code HTML pour le travail.

    Lorsque vous utilisez $(function(){});
    Le code attend de document prêt événement pour exécuter le code.
    Donc, si vous bouton d'appel.cliquez sur le mauvais temps, il ne serait pas à trouver le bouton ne fonctionne pas.

    Je vous remercie. Je suis en train de lire tous les commentaires et l'apprentissage de différentes façon d'explications (mais la réponse est la même). 🙂

    OriginalL'auteur Guerra

  4. 0

    Déplacer votre script tag de test.js juste au-dessus de la clôture body balise (ou après button tag). Si vous appelez votre script avant votre bouton, alors il ne peut pas trouver de bouton avec le nom de l'id. Si vous mettez une fois que le bouton puis il va travailler.

    OriginalL'auteur Ankur Patel