Losing style with load jquery mobile

Question

I've a page with this format:

<div id="index" data-role="page">
     <div id="container"></div>
</div>

And I load into #container the content of the page like this:

<script type="text/javascript">
 $(document).ready(function(){
    $('#container').load("pages/content.html");
 }); 
</script>

And "pages/content.html" has this content:

<div data-role="content">

    <a href="pages/calendar.html" data-role="button">Calendar</a>
</div>

The problem is that the button does not come with the style of jquery mobile .. I tried to do. trigger ('create') but without success.

Any Suggestions? Thank you!

take a look on this: http://stackoverflow.com/questions/9195287/losing-css-after-jquery-ajax-load — Gianpaolo Di Nino, Jun 24 '12 at 15:21

score 0 · Answer 1 · answered Jun 25 '12 at 22:35

Something like this should work:

$(document).ready(function(){
    $('#container').html('<div data-role="content"><a href="pages/calendar.html" data-role="button">Calendar</a></div>');
    $('#container').trigger('create');
 });

Swap the .html for your .load code. See jsFiddle: If you comment out the $('#container').trigger('create'); the link will remain unformatted.

Losing style with load jquery mobile

1 Answers1