.click() fonctionne avec du contenu statique, mais pas le contenu inséré à partir de l'appel ajax

Je joue (lire: introduction initiale dans) avec jQuery et faire une note simple en prenant une application. En ce moment, je tire le contenu d'une base de données ala ajax et l'insertion de cela dans la page. Cependant, lorsque j'essaie de faire un simple rappel pour .click() sur le contenu dynamique (bouton de sauvegarde), cela ne fonctionne pas. L'intention est de renvoyer le contenu dans la base de données pour être stocké..click() fonctionne avec du contenu statique, mais pas le contenu inséré à partir de l'appel ajax

Si je prends le même contenu que j'ai jquery whick up dynamiquement et juste jeter cela de manière statique dans le code HTML que le serveur web envoie, cela fonctionne. Je ne comprends pas pourquoi on travaille et pas l'autre.

The problematic website

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns='http://www.w3.org/1999/xhtml'> 
<head> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <link rel="stylesheet" type="text/css" href="layout.css" /> 
     <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 

     <!--Get notes out of database and show them--> 
     <script type="text/javascript"> 
     $(function() 
     { 
       $.ajax({ 
         url: 'noteGet.php', 
         data: "", 
         dataType: 'json', 
         success: function(rows) 
         { 
           for (var i in rows) { 
             var noteId = rows[i][0]; 
             var noteContent = rows[i][2]; 
             $('#allNotes') 
               .append('<span id="stickyNote'+noteId+'" class="stickyNote"><textarea id="stickyNoteTextArea'+noteId+'" class="stickyNoteTextArea">'+noteContent+'</textarea><a href="#" id="stickyNoteSave'+noteId+'">save</a></span>') 
           } 
         } 
       }); 


       //works 
       $('#stickyNoteSave1').click(function() { 
         alert("save button clicked"); 
       }); 

       //does not work 
       $('#stickyNoteSave13').click(function() { 
         alert("save button clicked"); 
       }); 

     }); 
     </script> 

     <!-- 
     <script type="text/javascript"> 
       $('#noteForm').submit(function(event) { 
         event.preventDefault(); 

         $.post("notePost.php", $('#noteTextArea').serialize(), function(data) { 
           alert(data); 
         }); 
       }); 

     }); 
     </script> 
     --> 

</head> 
<body> 
     <span id="allNotes"> 
       <!---The .click callback with the jquery selector works for only this span!--> 
       <span id="stickyNote1" class="stickyNote"><textarea id="stickyNoteTextArea1" class="stickyNoteTextArea">fake</textarea><a href="#" id="stickyNoteSave1">special save</a></span>') 
     </span> 

</body> 
</html>

Source

2012-04-22 overCaffeinated

Lorsque vous liez un événement, l'événement est fixé à l'élément DOM correspondant à votre sélecteur. Si l'élément n'existe pas encore, rien n'est lié.

La solution consiste à utiliser un délégué:

$('#container').on('click', '.elementselector', function() { 

})

#container devrait être un élément contenant les éléments nouvellement insérés (pourrait être document, mais plus spécifique est préférable) et .elementselector devrait être un sélecteur correspondant aux éléments vous voulez réellement les événements pour, par exemple #stickyNoteSave13

Source

2012-04-22 19:12:24 ThiefMaster

utilisation live:

$('#stickyNoteSave13').live('click',function() { 
     alert("save button clicked"); 
    });

Source

2012-04-22 19:10:48 mgraph

utiliser un delegate, live ou on au lieu de click:

// live 
$('#stickyNoteSave13').live('click',function(){/*...*/});

// on 
$('#stickyNoteSave13').on('click',function(){/*...*/});

// delegate 
$('sticky-notes-container-selector').delegate('#stickyNoteSave13','click',function(){/*...*/});

Je Je recommande voir vous utilisez jQuery 1.7+ donc en utilisant la méthode 'sur' comme ceci:

$('sticky-notes-container-selector').delegate('click','#stickyNoteSave13',function(){/*...*/});

Source

2012-04-22 19:11:20

en direct de jQuery n'est pas recommandé après jQuery 1.7, vous devez donc utiliser sur()

$(document).on('click', '#stickyNoteSave13', function(){/*...*/});

Source

2012-04-22 19:12:31

.click() fonctionne avec du contenu statique, mais pas le contenu inséré à partir de l'appel ajax

Répondre

Questions connexes