jQuery .on ('clic') même sur une page chargée dynamiquement

Question

J'ai un système de téléchargement de reportage sur ma page Web, qui télécharge des articles dans un dossier spécifié, et à partir de là, il répertorie leur contenu sur la page Web. J'ai divisé le texte, ainsi seulement 300 caractères sont montrés du texte, et quand l'utilisateur clique dessus le reste est montré.

Celui-ci le liste:

<?php foreach($dataArray as $data) { ?> 
    <div class="visible"> 
     <?php echo $data[0] . "<br/><center><a href='#' class='story_show'>Teljes Történet</a></center>"; ?> 
    </div> 
    <div class="hidden"> 
     <?php echo $data[1]; ?> 
    </div> 
<?php } ?> 

Ceci est mon jQuery:

$('.hidden').css('display', 'none'); 
$('.visible').click(function() { 

    $('.hidden').css('display', 'inline'); 
}); 

Cette page (tortenetek.php) est chargé via Ajax à la page principale (blog.php). J'inclus dans jQuery blog.php comme ceci:

<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" type="text/css" href="../css/stilus.css"/> 
     <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="../js/tinybox.js"></script> 
     <script type="text/javascript" src="../js/ajax.js"></script> 
     <link href="../css/lightbox.css" rel="stylesheet" /> 
     <script src="../js/lightbox.js"></script> 
       <script src="../js/story.js"></script> 

Story.js est le fichier de script que je utilise.

Answer 1

Si je l'ai bien compris votre question, vous devez profiter de la délégation de l'événement, en changeant votre .click() appel à un appel .on(), et le passage d'un sélecteur correspondant à un élément ancêtre qui est toujours dans le DOM:

Notez le changement dans la fonction de gestionnaire d'événements pour utiliser this et .next(). La façon dont vous l'avez actuellement affichera tous les éléments.hidden lorsque vous cliquez sur un élément.visible.

#someAncestor doit être un élément présent dans le DOM au moment de l'exécution du code. Cela fonctionne parce que la plupart des événements DOM jaillissent de l'élément sur lequel ils proviennent (la cible) à travers l'arbre. Vous pouvez capturer cet événement à n'importe quel élément ancêtre.