Home/ Questions/Q 7413649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:56:24+00:00

I have a jQuery search that gets a search term from the user and

  • 0

I have a jQuery search that gets a search term from the user and queries a mySQL DB via php in order to populate a div (with flashcard-like questions and answers). This works perfectly well. I am also using a jQuery toggle function to try to hide the answer until the word “Answer” is clicked. This also works fine as a standalone, and with text already on the html page – however, it won’t work on the text populated in from the search, even though the div id’s etc seem fine. Somehow the toggle function can’t act on the searched text. Here is the code:

HTML: index.php

    <html lang="en">
    <head>
    <meta charset = "utf-8">
    <title> JQ Instant Search</title>
    <link rel ="stylesheet" type = "text/css" href = "css/style.css">

    </head>
    <body>

    Start Search: <input id = "search" type = "text"/>
    <div id="search_results"></div>
    <script type="text/javascript" src = "js/jquery.js"></script>
    <script type="text/javascript" src = "js/search.js"></script>
        <h4 id="question1">Question 1 - Which animal barks?</h4>

        <ol>
        <li>1. Giraffe </li>
        <li>2. Worm </li>
        <li>3. Dog </li>
        </ol>

    <div class="explain"><a href="#" id="b" class="comment">Answer</a></div>
    <div id="commentboxb" class="commentbox" style="display:none">The answer is 3.   Anyone should know this</div>


     </body>
     </html>

JS: search.js

         $('#search').keyup(function() { 
         var search_term = $(this).val();
         $.post('php/search.php ', { search_term: search_term},  function(data){
         $('#search_results').html(data);
         }); 
         });    
         $(document).ready(function() {
         $('#commentbox').hide();
         $('a.comment').click(function() {
          var id = $(this).attr('id');
         $('#commentbox' + id).toggle(200);

         return false;
         });
         });

PHP: search.php

        <?php
        require 'connection.php';

        if (isset($_POST['search_term'])){
        $search_term = mysql_real_escape_string(htmlentities($_POST['search_term']));

         if (!empty($search_term)) {
        $search = mysql_query("SELECT `question`, `ans1` FROM `quiz` WHERE `question` LIKE '%$search_term%'");
        $result_count = mysql_num_rows($search);

        $suffix = ($result_count != 1) ? 's' :'';
        echo '<p>Your search for  <strong>'  , $search_term, '</strong> returned  <font color="red"><strong>' , $result_count, '</strong></font>  result',  $suffix , '</p>';
        echo '<div id="wrap">';
        $i=0;
        while ($results_row = mysql_fetch_assoc($search)) {


            echo '<p>' , $results_row['question'] ,' </p>';

            echo '<div class="explain"><a href="#" id="',$i,'" class="comment">Answer</a></div>';

            echo '<p><div id="commentbox',$i ,'" class="commentbox" style="display:none">',$results_row['ans1'],'</div></p>';

            $i=$i+1;
         }
         }
         }
         ?>

mySQL Table:quiz

    question                    *ans1
    what sound do cows make?        moo
    where is London?            England
    What is the negative cube root of e^-3? obvious
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that when you bind the handler to the elements that match those ids, they do not exist yet.

    If you are using the latest jQuery just use .on(), otherwise use .delegate() or .live(). These alternatives work for current and future matches to a selector.

    So:

    $('a.comment').click(function() {

    would become

    $('a.comment').on('click', function() {
    • 0