0

我有一个奇怪的问题，使用 data-role="listview" 显示 JSON 列表。只有在 Android 屏幕链接上显示的第一个项目有效，向下滚动的其他项目返回到第一个项目。我正在使用 jquerymbile 1.3.1 我试过：

overflow: scroll;
-webkit-overflow-scrolling: touch;

和

<script>
  $(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
  });
</script>

但仍然是相同的结果知道为什么吗？我的列表视图：

<div data-role="page" id="getAll_JSON">
<div data-role="header" >
    <h1>info</h1>
</div>
<div data-role="content" >
  <ul id="sitesList" data-role="listview" data-filter="true" data-split-icon="gear" >
  </ul>
</div>
<div data-role="footer">
</div>

我的jQuery ajax：

    $.ajax({
    url: mysite+"func=getM",
    data: 'lat='+lat+"&long="+long,
    dataType: "json",
    cache: false, 
    error: function () {
        $('#coupons').append('error');
        } ,
onFailure: function () {
        $('#coupons').append('failure');
        } ,
statusCode: {
        404: function() {
        alert("no info");
            }   
        } ,
success: function (result) {
    $.each(result.sites,function(index,dat){
    $("#sitesList").append(
    '<li onClick="getSite(' + dat.coupon_id + ')">'+
    '<a href="#detailsPage">' +
    '<img src="images/'+dat.coupon_img+'" style="float:left" width=80/>' +
    '<p style="white-space:normal; margin-right:2em;">name :     <strong>'+dat.coupon_name+'</strong></p>'+
    '<p style="white-space:normal; margin-right:2em;">info : '+dat.street+'</p>'+
    '<p style="white-space:normal; margin-right:2em;">add: '+dat.coupon_tmp+'</p>'+
    '</a></li>'
    );
});

$('#sitesList').listview('refresh');
}
})
4

2 回答 2

0
  1. 从. onClick_ li将其绑定到其中的a标签。

  2. 更好的是，使用委托

    $("#sitesList").on("click", "a", function(e) {
});

  3. 当您将数据附加getSite()到：data-li

    '<li>'+
'<a href="#detailsPage" data-coupid="'+ dat.id +'">' +
'<img src="images/'+dat.coupon_img+'" style="float:left" width=80/>' +
'<p style="white-space:normal; margin-right:2em;">name :       <strong>'+dat.coupon_name+'</strong></p>'+
'<p style="white-space:normal; margin-right:2em;">info : '+dat.street+'</p>'+
'<p style="white-space:normal; margin-right:2em;">add: '+dat.coupon_tmp+'</p>'+
'</a></li>'

  4. preventdefault当您点击a标签时使用：

    $("#sitesList").on("click", "a", function(e) {
   e.preventDefault();
   getSite($(this).attr("data-coupid"))
});

  5. href里面有什么a？你不是在自相矛盾吗？您点击一个liwhich 将发送点击，该点击a又将重定向到detailsPage

于 2013-06-22T12:53:55.447 回答
0

不确定它是否会导致问题，请尝试将width=80您的附加列表更改为width="80"，像这样，

$("#sitesList").append( 
'<li>'+
'<a href="#detailsPage" data-coupid="'+ dat.id +'">' + 
'<img src="images/'+dat.coupon_img+'" style="float:left" width="80" />' + 
'<p style=" margin-right:2em;">name : '+dat.coupon_name+'</p>'+ 
'<p style="white-space:normal; margin-right:2em;">info : '+dat.street+'</p>'+ 
'<p style="white-space:normal; margin-right:2em;">add: '+dat.coupon_tmp+'</p>'+ 
'</a></li>' );
于 2013-06-23T04:00:44.163 回答