jQuery 无法在“即时搜索”后切换答案

【问题标题】：jQuery unable to toggle after 'instant search'jQuery 无法在“即时搜索”后切换
【发布时间】：2012-02-01 03:22:41
【问题描述】：

我有一个 jQuery 搜索，它从用户那里获取搜索词并通过 php 查询 mySQL DB 以填充 div（带有类似抽认卡的问题和答案）。这工作得很好。我还使用 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

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

所以：

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

会变成

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

【讨论】：

谢谢！仅供参考 - 出于某种原因，'on' 不起作用，但 'live' 解决了问题。
不要忘记，从 jQuery 1.7 开始，.live() 方法已被弃用。