Php javascript jquery展开折叠搜索结果

下面我有一段代码，用于展开和折叠搜索结果。搜索将在同一页面上显示搜索结果，因此不会重新加载整个页面。它在第一次搜索时起作用，即在第一次搜索时，但是对于以后的搜索，“展开-折叠”功能将停止工作。我想这是因为页面没有重新加载，但我不知道如何修复它

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2   /jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$('.section').hide();
 $('h2').click(function () {
    $(this).toggleClass("open");
    $(this).next().toggle();
}); //end toggle

}); //end ready

</script>

<?php include('db.php');
$descr = $_POST['search'];
 echo '<ul id="user_list">';
 $user_query = $db->query("SELECT * FROM tblVulns WHERE Name LIKE '%".$descr."%'");
 while($user = $db->fetch_assoc($user_query))
 {
      echo ' <h2 style="cursor:pointer">'.stripslashes($user['Name']).'</h2>
    <div class="section" style="display:none">  <h3>'.stripslashes($user['Risk']).'</h3><p>
    <h4>'.stripslashes($user['Summary']).'<p>'
    .stripslashes($user['Description']).'<p>'
    .stripslashes($user['cveCode']).'<p></div>';
 }
?>

$（文档）.ready（函数（）{
$（'.section'）.hide（）；
$（'h2'）。单击（函数（）{
$（此）.toggleClass（“打开”）；
$（this.next（）.toggle（）；
})；//结束切换
}); //准备就绪

底部的代码是接收搜索结果的php。顶部的代码是处理展开和折叠的js

---

在页面加载后如何为所有搜索获得这项工作方面的任何帮助都将非常有用。感谢您将事件侦听器添加到页面加载中出现的任何

h2

元素的单击事件中。听起来您正在加载新内容，并期望相同的代码对它们起作用

相反，您需要执行以下操作：

$("body").on("click","h2",function(){
     $(this).toggleClass("open");
     $(this).next().toggle();
});

这将适用于页面上的任何

h2

。如果您只希望某个容器中的

h2

s起作用，则替换

body

以引用该元素

编辑：

---

我现在看到您使用的是一个相当旧的jQuery版本，它不支持

on（）

函数。如果可以的话，我建议升级，如果不能的话，我建议使用阿披舍克•萨哈的答案。

我认为其中一个原因是，在第一次搜索后它不起作用，因为加载的新元素没有与单击操作绑定

试试这个：

替换

$('h2').click(function () {
    $(this).toggleClass("open");
    $(this).next().toggle();
});

与

---

从jQuery文档来看：从jQuery 1.7开始，.live（）方法已被弃用。使用.on（）附加事件处理程序。较旧版本的jQuery用户应该优先使用.delegate（），而不是.live（）。抱歉，我发现

delegate（）

并没有出现在jQuery 1.3.2中。on（）是一个更好的选择。抱歉，我知道live（）方法被弃用，但我忘记了。一个月没有编码…你怎么能在不重新加载页面的情况下收到未来的搜索结果？

$('h2').live('click',function () {
    $(this).toggleClass("open");
    $(this).next().toggle();
});