JQuery doesn't start the second time a page is called via ajax

Question

I use jQuery to load search results from a php class when a user types in a search query. The problem is that jQuery starts and executes functions as needed for the first time on the main page, but when a user enters a search keyword and the results are loaded from a class file on the same page through ajax, jQuery does not execute the required function.

What I want to do, when the search results are loaded on the main page, it should show only the quote and the author, and not the Arabic and link. When the user clicks on Quote, he should act as an accordion, switching the Arabic div container and link.

However, although jQuery works fine with loading results from a class file, it does not execute to hide the Arabic language container and the link when it loads the search results, and does not fire a click event when the user clicks on the link to show the container, as firebug shows.

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();

A function in the class file that formats the search:

   ---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

This is because your quote elements are replaced, so you need to use .live()or .delegate()instead:

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

You need the following:

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

.click(), , ... , .live() document, p#s_quotes ( #s_quotes) , , .

---

$("#smore").hide(); success , :

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

Answer 2

, JQuery, , DOM , DOM .

, ( , , live(), :

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

live(), jQuery , DOM, , .