javascript jquery展开折叠搜索结果

Question

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

<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>';
 }
?>

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

任何关于如何在页面加载后为所有搜索获得这项工作的帮助都将是非常棒的。感谢

Answer 1

您正在将事件侦听器添加到页面加载中存在的任何h2元素的单击事件中。听起来你正在加载新的内容，并期望相同的代码为它们工作。

相反，你需要这样做：

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

这将适用于页面上的任何h2。如果您只希望某个容器中的h2具有效果，则将body替换为对该元素的引用

编辑：

我现在看到您使用的是一个非常旧的jQuery版本，它不支持on()函数。如果可以的话，我建议你升级，如果不能的话，可以使用阿布谢克·萨哈的答案。

Answer 2

我认为第一次搜索后它不起作用的原因之一是加载的新元素没有与点击操作绑定。

试试这个：

更换

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

带有

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