web-dev-qa-db-fra.com

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

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. Quand je clique sur #clicker, ça ne alerte pas et ça ne cache pas. J'ai vérifié la console et je ne reçois aucune erreur. J'ai également vérifié si JQuery était en cours de chargement et c'est effectivement le cas. Donc, je ne sais pas quel est le problème. J'ai également fait une fonction de préparation de documents avec une alerte et cela a fonctionné alors je ne suis pas sûr de ce que je fais mal. S'il vous plaît aider. Merci!

javascriptjqueryonclickclickonclicklistener
109
starbucks

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

c'est à dire.

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

Comme documentation jQuery indique: "Une page ne peut pas être manipulée en toute sécurité avant que le document ne soit" prêt ". JQuery détecte cet état de préparation pour vous. Le code inclus dans $( document ).ready() ne sera exécuté qu'une fois. la page DOM (Document Object Model) est prête pour l'exécution du code JavaScript "

167
mobius

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

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

pour id commence 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

47
user5636597

Votre code peut fonctionner sans document.ready (), assurez-vous simplement que votre script se trouve après le #clicker. Commander 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 sur votre page ou après l'élément affecté, 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>

Avis: Dans la démonstration jsbin , remplacez http par https dans le code, ou utilisez cette variante Demo

21
SaidbakR

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();    
    });
});
6
Black Sheep

Essayez d’ajouter $(document).ready(function(){ au début de votre script, puis });. De plus, la div a-t-elle l'identifiant correctement, c'est-à-dire comme identifiant, pas comme classe, etc.?

5
tjons

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();
    });
});
3
Rakyesh Kadadas

Assurez-vous que rien sur votre bouton (un div ou un img transparent) ne vous empêche de cliquer sur le bouton. Cela semble stupide, mais nous pensons parfois que jQuery ne fonctionne pas et que tout ça et que le problème réside dans le positionnement des éléments DOM.

3
vicgilbcn

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

2
Abhinav Singh