Jquery 使用单页模板移动传递和检索数据

Question

我使用来自 json 请求的数据创建了一个列表视图。列表视图填充，我想单击列表视图项目并转到更详细的页面。我需要检索 #page4 上单击的列表项的 value.id1。我正在使用单页 jquery 移动模板。我知道下面的方法不正确，但希望它能让我对我想要完成的事情有所了解。使用 jquery 移动设备的单页模型将数据 (value.id1) 传递到列表中的另一个页面的最佳方法是什么？

     $("#podList").click(function(){

        var listHtml ="<li>Select a date</li>"; 
        var driverid = $("#driverid").val();
        var url = "podHistory.php"
        $.post(url,{ driver: driverid } , function(response){
        var json = $.parseJSON(response);


        $.each(json, function(key, value){  

             listHtml += "<li><a href='#page4?=" + value.id1 + "'>" + value.date + "</a></li>";

            });//end each

    $("#history").html(listHtml); 
    $('ul').listview('refresh');

        });//end post podlist

        });//end pod list click 

   $("#page4").on("pagebeforeshow", function () { 

    var page = $(this);
    var query = page.data("url").split("?")[1];
    var id = query.split("=")[1];
    // console.log(id);
 });

Answer 1

您可以在数据属性中添加 value.id1 并在单击时抓取它。

演示

http://jsfiddle.net/5hzxqmpf/

Html

<ul data-role="listview" id="mylist">
 <li data-id="1">Row 1</li>
 <li data-id="2">Row 2</li>
 <li data-id="3">Row 3</li>
 <li data-id="4">Row 4</li>
</ul>

Jquery

var rowid;

$(document).on("click", "#mylist >li", function() {
rowid = $(this).closest("li").attr("data-id");
alert(rowid);;    
})

Jquery 使用单页模板移动传递和检索数据

Jquery Mobile Pass and Retrieve Data with single page template

jquery

json

listview

jquery-mobile