2回目のキャッシュでajaxがロードされる

Question

複数の行を持つ表があります。各行には隠れたdivをスライドさせるためのSHOWボタンがあります。そのdiv（classname：Content）はajax経由でそのテーブルのidを持つ2番目のページコンテンツを読み込みます。問題は次のようなものです：行の1つがクリックされたときに正しいものであり、2番目のページがその内部に読み込まれます。行は前の行の内容をロードしてから修正します。行が上にスライドするときに最後のデータをクリアする方法はありますか？この問題を解決するには？ここ は私のコードです：

$(function() { 
 
    $(".show").on("click", function(e) { 
 
    e.preventDefault(); 
 
    console.log($(this).find(':hidden').val()) 
 
    var content = $(this).closest("tr").next().find(".content"); 
 
\t $(".content").not(content).slideUp(); 
 
\t content.slideToggle(); 
 
\t $(".content").load("secondpage.htm?id="+id+""); 
 
    }); 
 
});

.subRow { 
 
    padding:0; 
 
    background-color: #CFCFCF; 
 
} 
 
.content { 
 
    background-color: #CFCFCF; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table style="width:50%" border="1"> 
 
    <caption>Ajax Test Table</caption> 
 
    <thead> 
 
    <tr align="center" class="parentRow"> 
 
     <th>Column 1</th> 
 
     <th>Column 2</th> 
 
     <th>Column 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="parentRow"> 
 
     <td><a href="#" class="show">SHOW <input type="hidden" value="123" name="id"/></a> 
 
     </td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
    </tr> 
 
    <tr class="subRow"> 
 
     <td colspan="5"> 
 
     <div class="content"><p></p></div> 
 
     </td> 
 
    </tr> 
 
    <tr class="parentRow"> 
 
     <td><a href="#" class="show">SHOW <input type="hidden" value="456" name="id"/></a> 
 
     </td> 
 
     <td>test cell</td> 
 
     <td>test cell</td> 
 
    </tr> 
 
    <tr class="subRow"> 
 
     <td colspan="5"> 
 
     <div class="content"><p></p></div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

あなたのクリックされた要素

$(function() { 
    $(".show").on("click", function(e) { 
    e.preventDefault(); 
    console.log($(this).find(':hidden').val()) 
    var content = $(this).closest("tr").next().find(".content"); 
    $(".content").not(content).slideUp(); 
    content.slideToggle(); 
    content.load("secondpage.htm?id="+id+""); 
    }); 
});