0

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

<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

在页面加载后如何为所有搜索进行这项工作的任何帮助都会很棒。谢谢

4

2 回答 2

1

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

相反，您需要这样做：

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

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

编辑：

我现在看到您使用的是不支持该on()功能的相当旧版本的 jQuery。如果可以的话，我建议升级，或者如果不能，请使用 Abhishek Saha 的答案。

于 2013-07-02T10:06:36.947 回答
0

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

试试这个：

代替

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

和

$('h2').live('click',function () {
    $(this).toggleClass("open");
    $(this).next().toggle();
});
于 2013-07-02T10:07:38.217 回答