的 DEMO

Question

我已经设法在Json中创建动态列表视图但我想在Jquery移动中单击该列表视图时进行详细信息视图，当我单击该动态列表时，我想获得有关该列表的更多详细信息。

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>

Answer 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>");
});

Jquery mobile中的动态列表视图到详细信息视图页面

1 个答案:

的 DEMO