Question

我有一个奇怪的问题，使用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');
}
})

Answer 1

从onClick中删除li属性。将其绑定到其中的a标记。

更好的是，使用delegation

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

当您将数据附加到getSite()时，您可以存储在data-属性中传递给li的优惠券ID：

'<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>'

preventdefault

使用a：

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

href中a的内容是什么？你不是自相矛盾吗？点击li会将点击发送到a，而detailsPage会重定向到{{1}}

Answer 2

不确定是否会导致问题，请尝试将附录列表中的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>' );

listview链接仅适用于第一项

2 个答案: