jQuery no puede alternar después de 'búsqueda instantánea'

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

preguntado el 01 de febrero de 12 a las 03:02

1 Respuestas

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 .en(), de lo contrario use .delegar() or .En Vivo(). These alternatives work for current and future matches to a selector.

De modo que:

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

se convertiría

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

Respondido 01 Feb 12, 07:02

Thanks! FYI - for some reason, 'on' doesn't work, but 'live' solves the problem. - CLS

Don't forget, as of jQuery 1.7, the .live() method is deprecated. - Bruno Silva

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.