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元素的click事件。听起来您正在加载新内容并希望相同的代码能够为它们工作。

相反，您需要这样做：

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

哪个适用于页面上的任何h2。如果您只希望特定容器中的h2具有效果，请替换body以获取对该元素的引用

编辑：

我现在看到你使用的是一个不支持on()函数的旧版jQuery。如果可以，我建议升级，或者如果你不能，我会建议使用Abhishek Saha。

Answer 2

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

试试这个：

替换

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

带

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

javascript jquery展开折叠搜索结果

2 个答案: