jQuery ne fonctionne pas la deuxième fois lorsqu'une page est appelée via ajax

Question

J'utilise jQuery pour charger les résultats de la recherche à partir d'une classe php lorsque l'utilisateur entre un terme de recherche. Le problème est que jQuery exécute et exécute les fonctions comme requis la première fois sur la page principale, mais lorsque l'utilisateur entre un mot clé de recherche et les résultats sont chargés à partir du fichier de classe sur la même page via ajax, jQuery n'exécute pas le fonction requise. Ce que je veux faire est, quand les résultats de recherche sont chargés sur la page principale, il devrait seulement montrer le citation et l'auteur, pas l'arabe et la référence. Lorsque l'utilisateur clique sur la citation, il devrait agir comme un accordéon, en basculant le conteneur div de l'arabe et de la référence. Cependant, bien que jQuery fonctionne très bien en chargeant les résultats du fichier de classe, il ne s'exécute pas pour masquer le conteneur d'arabe et de référence lorsqu'il charge les résultats de la recherche et n'exécute pas l'événement click lorsque l'utilisateur clique sur le Citer pour montrer le conteneur, comme le montre le firebug.

index.php:

<script type="text/javascript"> 
    $(function() { 

       $(".bsearch") 
        .keydown(function() { 
         //create post data 
          var postData = { 
          "search" : $(this).val() 
          }; 

          //make the call 
          $.ajax({ 
          type: "POST", 
          url: "quotes_in.php", 
          data: postData, //send it along with your call 
          success: function(response){ 
           $("#left").html(response); 
          } 
          }); 

        }), 




       $("div#smore").hide(); 
        //toggle the componenet with class msg_body 
       $("p#s_quotes").click(function() 
        { 
         $(this).next("div#smore").slideToggle(200); 
        }),   



       }); 

    </script> 

<!-- Begin Left Column --> 
     <div id="left"> 

     </div> 
<!-- End Left Column --> 

Quotes_in.php:

include_once "inc/class.quotes.inc.php"; 
$quotes = new Quotes($db); 


if (isset($_POST['search'])) 
    $quotes->searchQuotes(); 

La fonction dans le fichier de classe qui formate la recherche:

---SQL QUERY for SEARCH--- 
    public function formatSearch($row, $search) 
       { 


        return "<div class=\"swrap\">" 
        . "<p id=\"s_quotes\">&nbsp;" . $cQuote . "&nbsp;</p>" 
        . "<div id=\"smore\"><p id=\"s_arabic\">" . $this->h($row['cArabic']) . "</p>" 
        . "<p id=\"s_reference\"><span class=\"source\">Source:</span> " . $this->h($row['vReference']) . "</p></div>" 
        . "<p id=\"s_author\"><b>-</b>&nbsp;" . $this->h($row['vAuthor']) . "</p></div>"; 
       } 

Answer 1

Il est becasue vos éléments de devis sont étant remplacé, vous devez donc utiliser .live() ou .delegate() ici, au lieu de ceci:

$("p#s_quotes").click(function() { 
    $(this).next("div#smore").slideToggle(200); 
});   

Vous devez ceci:

$("p#s_quotes").live('click', function() { 
    $(this).next("div#smore").slideToggle(200); 
});  

Contrairement .click() qui se fixe un gestionnaire d'événements à l'élément, qui est de remplacer ... et donc le gestionnaire d'événements disparaît aussi, .live() ajoute un événement gestionnaire à document qui écoute pour un clic de p#s_quotes (cela peut être simplement#s_quotes) pour lancer une bulle, et exécute le gestionnaire si cela se produit.

---

Pour la partie cachette, soit appeler $("#smore").hide(); à nouveau dans votre rappel success, ou les créer cachés, comme ceci:

<div id=\"smore\" style='display: none;'> 

Answer 2

La chose importante à retenir lorsque vous attachez des événements sur JQuery est que s'exécute à ce moment, pour l'état actuel du DOM, et ne s'appliquera pas nécessairement aux éléments qui seront ajoutés au DOM dans le futur.

Pour attacher des événements aux objets qui peuvent ne pas exister encore (ainsi que des articles déjà existent, utilisez la fonction live(), comme ceci:

 $("p#s_quotes").live("click", function() 
       { 
        $(this).next("div#smore").slideToggle(200); 
       }), 

En utilisant live(), jQuery surveillera les nouveaux éléments tels qu'ils sont ajoutés au DOM, et s'ils correspondent à vos sélecteurs, ils leur appliqueront le gestionnaire correct