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置き換えますbody

編集：

関数をサポートしていないかなり古いバージョンの jQuery を使用していることがわかりon()ます。可能であればアップグレードするか、できない場合はAbhishek Sahaの回答を使用することをお勧めします。

于 2013-07-02T10:06:36.947 に答える
0

最初の検索後に機能しない理由の1つは、読み込まれた新しい要素がクリックアクションにバインドされていないためだと思います。

これを試して：

交換

$('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 に答える