動的に更新されたリストビューがあります。JSON サービスからデータを取得し、解析して動的に div に注入しました。問題は; すべてのデータを生成した後、スクロールは機能していますが、完全ではありません。リストビューを押して上にスクロールすると、画面から時指を離すと、リストビューの位置が自動的に開始位置に戻ります。ハードコードされたコードで iScroll と jQuery モバイルを試したところ、<ul><li>
動作しました。
以下にコードを示します。
<script>
var myScroll2;
function loaded() {
myScroll2 = new iScroll('wrapper2');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
..
<div id="wrapper2">
<div data-role="content">
<div id="panoListDetay"></div>
</div>
</div>
---以下のコードは、リストビュー用のデータを生成するものでした。
/*automatically upldated script*/
/*called every 5 second*/
<script>
$(function update_twit(){
$.ajax({
url: "http://myweepage.org/service.json?q=getlast10data",
dataType: 'jsonp',
success: function(json_results){
$("#notice_div").html('');
$("#panoListDetay").html('');
$('#panoListDetay').append('<ul id="tweetul" data-role="listview" data-theme="c"></ul>');
listItems = $('#panoListDetay').find('ul');
$.each(json_results.results, function(key) {
html = '<h3>'+json_results.results[key].screen_name+'</h3><div class="ui-li-desc">'+json_results.results[key].text+'</div>';
html += '<p class="ui-li-aside"><img WIDTH=12 HEIGHT=12 src="images/11-clock.png"/><strong> '+json_results.results[key].tarih.substring(11,16)+'</strong></p>';
html +='<p class="ui-li"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>';
listItems.append('<li>'+html+'</li>');
});
$('#panoListDetay ul').listview();
window.setTimeout(update_twit, 5000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
window.setTimeout(update_twit, 20000);
}
});
})
</script>