こんにちは、jQuery、jScrollPane、およびAJAXでのデータの読み込みに問題があります。静的データがdivにある場合、スクロールペインは正常に機能しますが、divにAJAXを使用してデータをロードするとすぐに、スクロールペインが消えます。
その後、スクロールペインを再初期化する必要があることを知っているので、これを実行しています。しかし、機能していないため、おそらく間違っています。
したがって、次の例はロードされたときに正常に機能しますが、ホームボタンをクリックするとスクロールバーが消えます。助言がありますか?
コード:
<html>
<head>
<title>Title of my page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/css" href="jquery/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script src="jquery/jquery-1.4.2.min.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="jquery/jquery.jscrollpane.min.js"></script></head>
<body style="background-color: black;">
<div style="background-image: url(test.jpg);background-repeat: no-repeat; width: 1024px; height: 768px; margin-left: auto; margin-right: auto;">
<div id="menu">
<script type="text/javascript">
$(document).ready(function(){
reinitialiseScrollPane = function()
{
$('#contents').jScrollPane();
}
$("#home").click(function(){ $("#contents").load("lorem.php", '', reinitialiseScrollPane); });
$("#contents").jScrollPane();
});
</script>
<a id="home"><span>Home</span></a>
</div>
<div id="website">
<div id="contents" name="contents">
</div>
</div>
</div>
</body>