Question

I use jquerymobile and now i want to put li inside to a ul listview with json.

I have to follow code:

<script type="text/javascript">
$(function() {
$(document).ready(function(){

        $.getJSON("url",function(data) {
                $.each(data.posts, function(i,data){

                $('#output').children('ul').append('<li><a href="#">'+data.title+'</a></li>');

                });
            }
        );
        return false;
    });
});
</script>


<div data-role="content">
    <div class="content-primary">   
        <div id="output">
               <ul data-role="listview">

                </ul>
            </div>
            </div>
</div>

It works but not inside the .

Does anyone now how i can fix this?

Kind regards,
Tom

Answer 1

The choice of child/children may be throwing it off a bit, give this a try, and see if that makes a difference.

$('#output ul').append(..........);

Since you are appending these list items to a list after the DOM is loaded, and are using jQueryMobile you will have to add an additional item to the chain of functions for the element. like so:

$('#output ul').append(..........).trigger('create');

Create is a jquery mobile event. that is fired off when the DOM is initially loaded, styling all elements that are in the DOM when its loaded. However by adding new ones they won’t have the styling as jquerymobile doesn’t rely on css through conventional stylesheet relations. It uses stylesheets for the styling but the styling gets applied according to the container types example

data-role="header" gets styled after the dom is loaded, so even if you styled the specific element using conventional methods with CSS jquery mobile will override it after the DOM is ready