jQuery cas, pas de tir

J'ai 3 fichiers:

  • js_json.js -> pour mon code json
  • javascript.js -> pour mon javascript
    fonction
  • index.php

Ici le code pour js_json.js:

$(function(){
    $('#postTitle').change(function(){

        var title_id = $("#postTitle").val();


        $.ajax({
            type:"post",
            url:"proses.php",
            data:"title_id=" + title_id,
            dataType:"json",
            success:function(data){
                body="";
                //$.each(data, function(i,n){
                    //body = n['body'];    
                //});
                body += "<a href=\"javascript:void(0);\" id=\"pesan\" name="pesan" onClick=\"\">Hola Test</a>";
                $(".postBody").empty();
                $(".postBody").append(body);
            },
            error:function(data){
                $(".postBody").empty();
                $(".postBody").append("NO Post Selected.");
            }

        });
        return false;
    });
});

et voici mon javascript.js code:

$(function (){
    $("a[name=pesan]").click(function (){
        alert("holalalalalal.....!");    
    });
});

et ici le index.php code:

    //some code
    <body>
        <a href="javascript:void(0);" id="pesan" name="pesan">Hola Test 1</a>
        Posts : <br />
        <select name="title" id="postTitle">
            <option value="">Select Post...</option>
            <?php
                $sql = "SELECT id, title FROM posts ORDER BY title";
                $query = mysql_query($sql) or die(mysql_error());

                while($rows = mysql_fetch_array($query)){
                    print('<option value="' . $rows['id'] . '">' . $rows['title'] . '</option>');
                }
            ?>
        </select>
        <br />
        Body : <br />
        <div class="postBody">
            Will show the body of post.
        </div>
    </body>
</html>

et ma question est:

Lorsque je clique sur le lien "Hola" Test 1", il fonctionne, et le message s'affiche. Le problème, c'est après que j'ai cliquez sur l'option sélectionner, et le lien "Hola Test" s'affiche, puis je clique sur ça ("Hola Test") lien, le message ne s'affiche pas et il n'y a pas d'erreurs dans firebug...

Quelqu'un peut-il m'expliquer pourquoi...? Merci...

Utilisation .live() que @Matt répondu, mais gardez à l'esprit qu'il est incorrect d'utiliser le même id dans une page plus d'une fois (les id sont uniques), et sera plus que probablement causer d'autres problèmes à l'avenir..
merci pour les conseils...

OriginalL'auteur Sindhu13 | 2011-05-30

  1. 18

    click() ne liera le cas pour les éléments qui existent dans la page à la fois click est appelé (il en va de même pour on() sans un sélecteur, bind(), et toutes les autres méthodes dans le raccourci-groupe pour lier; keydown(), change() etc. ).

    Parce que votre autre élément, c'est s'ajouter via AJAX quelques temps plus tard, le gestionnaire n'est pas lié par elle.

    Utilisation .sur() avec un sélecteur au lieu de cela, ce qui aura pour effet de lier l'événement à tous les actuels et futurs des éléments appariés par le sélecteur.

    $(function (){
    $(document).on('click', 'a[name=pesan]', function () {
        alert("holalalalalal.....!");    
    });
});

    Depuis on() a été introduit en jQuery 1.7, si vous utilisez des versions antérieures de jQuery (comme celles qui existaient lorsque cette question a été posée), vous pouvez utiliser live() ou delegate() au lieu de sur;

    $(function (){
    $('a[name=pesan]').live('click', function () {
        alert("holalalalalal.....!");    
    });
});
    merci, ça marche... et merci pour l'explication... c'est ce que je cherchais....
    merci pour cette! Je me suis coincé avant en utilisant " on " directement à l'élément comme: $( "p" ).on( 'click', function() {} ); aucune explication pourquoi? J'ai remarqué que Chrome est en train de lancer cet avertissement: Synchrone XMLHttpRequest sur le thread principal est déconseillée en raison de ses effets néfastes pour l'expérience de l'utilisateur final. Pour en savoir plus, consultez xhr.spec.whatwg.org.

    OriginalL'auteur Matt

  2. 1

    Je tiens à mentionner (parce que je n'ai trouvé aucune mention de cela dans tout de l'événement "pas de tir" cas j'ai parcouru le web pour) qu'il y est une possibilité qui pourrait vous mordre.

    Si vous arrive d'utiliser .supprimer() d'en extraire quelque chose, à titre temporaire, les DOM et insérez-la de nouveau, alors vous allez perdre vos événements. Ce que vous devez utiliser à la place est .détacher() de préserver les données et les événements postérieurs à la réinsertion. Cela peut être difficile à déboguer comme tout ce qui peut paraître normal, et l'événement les outils de débogage sont sommaires, au mieux.

    (Personnellement, je les appelle quelque chose de plus comme .detachAndScrubDataAndEvents() et .detach(), car je suis un fan de noms descriptifs d'économiser des heures de débogage. Pour ceux qui trouvent .remove() et .detach() être sémantiquement et significative des noms uniques... que la paix soit avec vous... MAIS vous êtes à plat erroné.)

    OriginalL'auteur HostileFork