Joindre JQuery Cliquez sur l'Événement à l'Ancre Id

J'ai une question facile. Pourquoi ne puis-je pas joindre un événement de clic droit pour un ancres Id? J'aurais du remarquer que je suis aussi à l'aide de JQuery Mobile.

            <div id="foobarNavbar" data-role="navbar" style="display:none;">
                <ul>
                    <li><a id="foo" href="#foo" data-icon="plus">New Event</a></li>
                    <li><a id="bar" href="#bar" data-icon="grid">Events</a></li>
                </ul>
            </div><!-- /foobarNavbar-->

J'essaie de joindre un événement de clic à toto. Cela ne fonctionne pas:

        $('#foo').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
        });

Cela ne fonctionne pas mais donne moi l'événement click pour les deux foo et bar. Il n'est pas possible de se lier à un point d'ancrage Id ou ai-je fait une erreur de rookie?

        $('#foobarNavbar ul li a').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
            console.log(e);
        });
Le premier devrait fonctionner. Est le DOM prêt lorsque le code s'exécute?
jsfiddle.net/cwyRb le premier ne fonctionne en effet.
Il a été JQuery Mobile. La page n'est pas chargée dans le dom document prêt

OriginalL'auteur Jon Wells | 2012-06-27

  1. 2

    Envelopper ce code dans le document ready et cela devrait fonctionner si vous n'avez pas toutes les autres erreurs de script et vous avez jQuery chargé.

    $(function(){
   $('#foo').click(function(e) 
   {   
      e.preventDefault();
      console.log("You clicked foo! good work");
   });
});
    Je suis d'accord que c'est une bonne chose à faire, mais si le deuxième exemple de l'OP travaillé, il doit être le cas, qu'il est déjà à l'aide d'un "prêt" de gestionnaire ou quelque chose d'autre pour s'assurer que le DOM est prêt.
    Depuis jQuery 1.7, vous devez utiliser .on(event, handler) au lieu de lier
    Je suis d'accord. Je suppose que certains d'autres erreurs de script peut être. Ou une autre possibilité est qu'il ait cliqué sur le deuxième exemple après 1 mnt( DOM devrait avoir chargé à l'époque) et cliqué sur le premier pressés !
    Il est déjà enveloppé dans le document de prêt. Je pense que le problème peut être avec JQuery Mobile. J'ai juste déplacé le liant à "pageinit" de l'événement, et cela fonctionne.
    Vous n'avez pas mentionné que c'est jQuery Mobile n'importe où il int questions! Toujours essayer d'utiliser le bon tags.

    OriginalL'auteur Shyju

  2. 1

    Comme ça il va travailler, je suppose...

    $('#foobarNavbar').on('click','#foo', function(e) {   
   e.preventDefault();
   e.stopPropagation();
   console.log("You clicked foo! good work");
   console.log(e);
});

    OriginalL'auteur Sergei Zahharenko

  3. 1

    Important: Utiliser $(document).bind('pageinit'), $(document).prêt()

    La première chose que vous apprenez à l'jQuery est l'appel de code à l'intérieur de la
    $(document).prêt() donc tout va exécuter dès que le
    DOM est chargé. Cependant, jQuery Mobile, Ajax est utilisé pour charger l'
    le contenu de chaque page dans les DOM que vous naviguez, et les DOM prêt
    le gestionnaire seulement s'exécute pour la première page. Afin d'exécuter du code à chaque fois qu'un
    nouvelle page est chargée et créé, vous pouvez lier à la pageinit événement.
    Cet événement est expliqué en détail au bas de cette page.

    J'essayais de le lier à l'aide d'document de prêt au lieu de pageinit. La première fonction 

    $('#foo').bind('click', function(e) 
        {   
            e.preventDefault();
            console.log("You clicked foo! good work");
        });

    fonctionne très bien lorsqu'il est déplacé à la " pageinit de l'événement. Je ne suis toujours pas sûr, cependant, pourquoi le deuxième exemple de code a fonctionné, mais pas le premier.

    OriginalL'auteur Jon Wells