jquery styles not applied in dynamically creation

Question

I created collapsible listview in jquery mobile. It this one as dynamically. If I created collapsible in html code, it display fine. The same one I tried as dynamically, then the styles are not applied.

Code in Html page:

<div data-role="collapsible">
                    <h2>Bucks County<br>BU</h2>
                    <ul data-role="listview">
                        <li><a href="index.html">Location </a></li>
                    </ul>
            </div>

Code in Jquery:

$("#lsititems").append('<div data-role="collapsible">'+
                    '<h2>'+data[0].SiteName+'<br>'+data[0].SiteCode+'</h2>'+
                    '<ul data-role="listview">'+
                    '<li>'+'<a href="index.html">'+'Location'+'</a>'+'</li>'+
                    '</ul>'+
                    '</div>') 

I tried this one also:

$("#lsititems").append("<div data-role='collapsible'>"+
                                "<h2>"+data[1].SiteName+"<br>"+data[1].SiteCode +"</h2>"+
                                "<ul data-role='listview'>"+
                                "<li>"+"<a href='index.html'>"+"Location"+"</a>"+"</li>"+
                                "</ul>"+
                                "</div>")  

O/P:

From above code, first one created from Html, 2nd and 3rd created from dynamically in jquery. What's wrong in my code.. please help me.. Thanks in advance...

Answer 1

In jQuery mobile when you add content dynamically you need to initialize the content, or if you are adding content (for example adding items to a listview) you would need to refresh the content.

If you have several items that need to be initialized you can just trigger the create event on the page to initialize all of them. Often its best to do so in the pageshow event.

For example

$("#mypage").on('pageshow', function () {
   $(this).trigger("create");
});

Answer 2

对于动态添加的内容，您将需要调用.collapsible()方法：

$('div[data-role=collapsible]').collapsible();