【问题标题】：Dynamic listview to Details view page in Jquery mobileJquery mobile中的动态列表视图到详细信息视图页面
【发布时间】：2016-08-26 13:57:06
【问题描述】：

我已经设法在 Json 中创建了一个动态列表视图，但是当我在 Jquery mobile 中单击该列表视图时，我想查看详细信息，当我单击该动态列表时，我想获取有关该列表的更多详细信息。

jQuery 代码

<script>
            $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
                      function(data)
                      {
                      $("#images").empty();

                      $(data.items).each(function(i,item)
                            {
                             $("#images").append(movielist(item));
                             //if ( i == 4 ) return false;
                             });

                      $("#images").listview("refresh");

                      });

                      function movielist(item)
                      {

                          return "<li><a href='#pageone2'>"+item.title+"</a></li>";
                      }
            </script>

    </head>

HTML代码：

<body>  
         //Page 1
        <div data-role="page" id="pageone" data-theme="b">
            <div data-role="header">
                <div class="custom_header">
                    <h1>Welcome To My Homepage</h1>
                </div>
            </div>
                <div class="custom_main">
                    <p style="color:white">Welcome!</p>
                    <div data-role="content">
                 <ul data-role="listview" data-inset="true" id="images" >
                     </ul>
                 </div>
                    <br> <br>     
                    <a href="#pageone2" data-transition="flip" data-role="button">Go</a>
                </div>
            <div data-role="footer" data-position="fixed">
                <div class="custom_footer">
                    <h1>Footer Text</h1>
                </div>
            </div>
        </div> 
</body>

【问题讨论】：

标签： android cordova listview jquery-mobile

【解决方案1】：

使用 event delegation 在动态创建的 dom 元素上添加点击处理程序：

$("#images").on("click", "li a", function(e){
    //code to show details goes here
});

更新：

您可以将列表项中的对象详细信息保存为数据属性：

  $("#images").empty(); 
  for (var i=0; i<data.length; i++){
      $("#images").append("<li><a data-details='" + JSON.stringify(data[i]) + "' href='#pageone2'>"+data[i].Name+"</a></li>");
  };
  $("#images").listview("refresh");

然后单击，检索数据属性并将值写入详细信息页面，例如：

$("#images").on("click", "li a", function(e){
    var obj = $(this).data("details");

    $("#theDetails").empty();
    $("#theDetails").append("<p>Name: " + obj.Name +  "</p>");
    $("#theDetails").append("<p>id: " + obj.id +  "</p>");
    $("#theDetails").append("<p>Email: " + obj.Email +  "</p>");
    $("#theDetails").append("<p>Designation: " + obj.Designation +  "</p>");
    $("#theDetails").append("<p>ContactNo: " + obj.ContactNo +  "</p>");
    $("#theDetails").append("<p>Address: " + obj.Address +  "</p>");
});

DEMO

【讨论】：

示例如果我在一个对象中有 7 个属性，我将在列表视图示例名称属性中仅显示一个属性，其余我想在详细视图中显示 { Address = "United Kingdom";联络号码 = 9988112345；指定 = SenioriOS 开发者；电子邮件=“thiru@gmail.com”；姓名 = 阿卜杜勒； ID = 1; }
@VyTcdc，我已经更新了答案并提供了一个有效的 CodePen 演示。您需要根据自己的喜好自定义详细信息视图...
非常感谢它正在工作。