Jquery Mobile 使用单页模板传递和检索数据答案

【问题标题】：Jquery Mobile Pass and Retrieve Data with single page templateJquery Mobile 使用单页模板传递和检索数据
【发布时间】：2015-02-22 15:35:28
【问题描述】：

我使用来自 json 请求的数据创建了一个列表视图。列表视图填充，我想单击列表视图项目并转到更详细的页面。我需要检索 #page4 上单击的列表项的 value.id1。我正在使用单页 jquery 移动模板。我知道下面的方法不正确，但希望它能让我对我想要完成的工作有所了解。使用 jquery mobile 的单页模型将数据（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);
 });

【问题讨论】：

标签： jquery json listview jquery-mobile

【解决方案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);;    
})

【讨论】：