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:

enter image description here

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...

What styles do you mean? The CSS for `div`s, `h2` and lists? — Bergi, Oct 22 '12 at 13:31
Jquery roles, like data-role ="collapsible" not applied in dynamic creation. — Lokesh, Oct 22 '12 at 13:35
Of course, they are only data attributes. How do you expect any code to catch their creation? You have to apply it explicitly — Bergi, Oct 22 '12 at 13:49
possible duplicate of [Dynamically adding collapsible elements](http://stackoverflow.com/questions/4214538/dynamically-adding-collapsible-elements). This question is asked A LOT. In general, please search the site for questions/answers that can help before posting questions like this one. For instance, as you typed the title of your question, SO tried to give you similar existing questions, several of which will help you solve your question. — Jasper, Oct 22 '12 at 19:31

Jack · Answer 1 · 2012-10-22T13:55:09.920

0

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

edited Oct 22 '12 at 13:55

answered Oct 22 '12 at 13:33

Jack

10,943
13
50
65

This can create a race condition where it's possible that the `pageshow` event fires before the dynamic content is actually added to the DOM. It would be far better to run the `.trigger('create')` code just after the element(s) have been added to the DOM. – Jasper Oct 22 '12 at 19:29
True, except that I've found that sometimes JQM doesn't properly enhance the content unless it's called in the `pageshow event`. I encountered this quite a while ago (don't remember which version of JQM, probably 1.0 or earlier), so it's possible that this isn't an issue anymore. – Jack Oct 22 '12 at 19:34

score 0 · Answer 2 · answered Oct 22 '12 at 13:33

0

For dynamically added content you will need to call .collapsible() method:

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

answered Oct 22 '12 at 13:33

Michal Klouda

14,263
7
53
77

jquery styles not applied in dynamically creation

2 Answers2

Linked