VyTcdc VyTcdc - 3 months ago 58
Android Question

Dynamic listview to Details view page in Jquery mobile

I have manage to create an Dynamic listview in Json but I want to do details view when I click that listview in Jquery mobile,When I click that Dynamic list I want to get more details about that list.

Jquery code

<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 Code :

<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

Use event delegation to add a click handler on dynamically created dom elements:

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