Question

我有一个jQuery搜索，它从用户那里获取一个搜索词，并通过php查询mySQL数据库，以便填充一个div（带有类似flashcard的问题和答案）。这非常有效。我也使用jQuery切换功能试图隐藏答案，直到单击“答案”一词。这也可以作为一个单独使用，并且已经在html页面上显示文本 - 但是，它不会对搜索中填充的文本起作用，即使div id等似乎很好。不知何故，切换功能不能对搜索到的文本起作用。这是代码：

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表：测验

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

Answer 1

问题在于，当您将处理程序绑定到与这些ID匹配的元素时，它们还不存在。

如果您使用的是最新的jQuery，请使用.on()，否则请使用.delegate()或.live()。这些替代方案适用于选择器的当前和未来匹配。

所以：

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

会变成

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

'即时搜索'后jQuery无法切换

1 个答案: