Pourquoi cette fonction de clic jQuery ne fonctionne-t-elle pas?

116

Code:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();
    });
</script>

Le code ci-dessus ne fonctionne pas. Lorsque je clique sur #clicker, cela n'alerte pas et ne se cache pas. J'ai vérifié la console et je n'obtiens aucune erreur. J'ai également vérifié si JQuery était en cours de chargement et c'est effectivement le cas. Je ne sais donc pas quel est le problème. J'ai également fait une fonction de document prêt avec une alerte et cela a fonctionné, donc je ne sais pas ce que je fais de mal. Veuillez aider. Merci!

javascript jquery onclick click onclicklistener Starbucks
la source
3
Enveloppez le code dans document.ready
karthikr
1
avez-vous vérifié la console du navigateur s'il y a des erreurs, une syntaxe ou un fichier introuvable ou autre chose?
Siddharth Pandey
1
Double possible de Pourquoi jQuery ou une méthode DOM telle que getElementById ne trouve pas l'élément?
user4642212

Réponses:

180

Vous êtes censé ajouter le code javascript dans un $(document).ready(function() {});bloc.

c'est à dire

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

Comme l' indique la documentation de jQuery : «Une page ne peut pas être manipulée en toute sécurité tant que le document n'est pas« prêt ». JQuery détecte cet état de préparation pour vous. Le code inclus à l'intérieur $( document ).ready()ne s'exécutera que lorsque la page Document Object Model (DOM) sera prête pour JavaScript code à exécuter "

Mobius
la source
7
Qu'est ce que c'est stupide de ma part!! Encore à apprendre. Je pensais que la fonction de clic n'en avait pas besoin car elle était activée en cliquant sur document.ready où elle se charge lors du chargement de la page.
starbucks
7
@starbucks Ne vous inquiétez pas trop, tout le monde fait des erreurs, et surtout en apprenant :)
mobius
4
La fonction de document prêt configure les écouteurs en fonction de ce qu'elle trouve sur la page. Si vous ne le faites pas, ils ne sont jamais configurés. La meilleure façon de faire cela, cependant, est de les déléguer avec la fonction "on ()", à la place. De cette façon, tous les éléments ajoutés à la page après le chargement fonctionneront toujours!
Sean Kendle
1
De plus, avec la fonction "on", vous n'avez pas réellement besoin d'utiliser la fonction de document prêt. Il définit l'auditeur au niveau du document, puis gratte la page pour les éléments à écouter. C'est pourquoi il est un peu plus rapide d'être un peu plus précis sur le type d'élément que vous voulez écouter, comme "div.listentome" par opposition à ".listentome". Au lieu de vérifier chaque élément pour la classe "listentome", il ne vérifie que les divs, dans cet exemple.
Sean Kendle
2
@SeanKendle - Ce n'est pas comme ça que ça .on()marche. Vous pouvez (facultativement) l'utiliser pour créer des gestionnaires délégués, mais dans tous les cas, il ne «gratte pas la page», il lie un écouteur aux éléments spécifiques de l'objet jQuery sur lequel vous l'appelez.
nnnnnn
65

J'ai trouvé la meilleure solution à ce problème en utilisant ON avec $ (document).

 $(document).on('click', '#yourid', function() { alert("hello"); });

pour id commencez par voir ci-dessous:

$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });

enfin après 1 semaine je n'ai pas besoin d'ajouter onclick triger. J'espère que cela aidera beaucoup de gens

user5636597
la source
2
Ah merci, ce qui précède n'a pas fonctionné pour moi, mais cela a fonctionné! (probablement une interaction étrange avec angulaire et routage)
Flink
Tout comme Flink, j'ai également résolu le problème avec cela. Merci .. 100 vote positif ..
Zeta
3
Il est appelé délégation et est nécessaire pour le contenu inséré ou déplacé dynamiquement
mplungjan
Celui-ci a fonctionné pour moi! Merci :)
Amrit Pal Singh
20

Votre code peut fonctionner sans document.ready (), assurez-vous simplement que votre script est après le #clicker. Découvrez cette démo: http://jsbin.com/aPAsaZo/1/

L'idée dans le concept prêt. Si vous êtes sûr que votre script est la dernière chose de votre page ou qu'il se trouve après l'élément concerné, cela fonctionnera.

<!DOCTYPE html>
<html>
<head>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
  <a href="#" id="clicker" value="Click Me!" >Click Me</a>
  <script type="text/javascript">

        $("#clicker").click(function () {
            alert("Hello!");
            $(".hide_div").hide();

        });


</script>

</body>
</html>

Remarquer: dans lejsbindémo remplacer httppar httpslà dans le code, ou utiliser cette variante Démo

SaidbakR
la source
11
+1 - Votre réponse explique pourquoi on a besoin de la document.ready()fonction.
Kevin le
1
C'est une meilleure réponse car la suggestion que le script jquery doit être dans une fonction 'document.ready ()' est trompeuse. Oui, c'est plus sûr là-bas, mais si vous configurez l'élément html pour une fonction jquery à la volée (comme interroger une ligne de table en fonction du bouton sur lequel vous cliquez), il doit être à l'extérieur / après cette fonction. J'ai changé par erreur le nom de la div cible pour mes superpositions pop-up, puis j'ai passé plusieurs heures frustrantes à rechercher une erreur de script. Grande leçon apprise.
johnlholden
C'est une mauvaise réponse, car le code JS doit être dans la tête du DOM et non en ligne. Le fait que vous ayez passé plusieurs heures à rechercher l'erreur de script n'est pas un problème JS, c'est votre problème de ne pas lire correctement la documentation et de ne pas savoir comment utiliser les outils de débogage.
Andrey Shipilov
@AndreyShipilov Qui a dit ça, il suffit de regarder la source de cette page et de descendre jusqu'en bas, vous y verrez du code javascript.
SaidbakR
1
@AndreyShipilov - savez- vous comment utiliser les outils de débogage pour résoudre ce problème? Alors partagez vos connaissances avec les autres au lieu de les offenser. Essayez d'être constructif et juste.
Matt
6

Vous devez envelopper votre code Javascript avec $(document).ready(function(){});Look this JSfiddle .

Code JS:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});
Mouton noir
la source
5

Essayez d'ajouter $(document).ready(function(){au début de votre script, puis });. En outre, est-ce divque l'ID contient correctement, c'est-à-dire en tant qu'identifiant, pas en tant que classe, etc.?

tjons
la source
3

Assurez-vous qu'il n'y a rien sur votre bouton (comme un div ou une img transparente) qui empêche de cliquer sur le bouton. Cela semble stupide, mais parfois nous pensons que jQuery ne fonctionne pas et tout ce qui se trame et le problème est sur le positionnement des éléments DOM.

vicgilbcn
la source
ou, par exemple, z-index!
a darren
3

Vous pouvez utiliser $(function(){ // code });qui est exécuté lorsque le document est prêt à exécuter le code à l'intérieur de ce bloc.

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});
Rakyesh Kadadas
la source
2

Juste une vérification rapide, si vous utilisez un moteur de création de modèles côté client tel que le guidon, votre js se chargera après document.ready, il n'y aura donc aucun élément auquel lier l'événement, donc utilisez le gestionnaire onclick ou utilisez-le sur le corps et vérifier la cible actuelle

Abhinav Singh
la source
si vrai, j'utilise flask / jinja et cela ne fonctionne que si j'utilise la propriété onclick dans le HTML et que je fais référence à partir de là à une fonction dans mon <script>
Rich Stone