Jquery mobile dynamic fields not applying styles?

Jquery mobile dynamic fields not applying styles?

Hi i have creates a html page that creates dynamic fields and when i add them to the listview, it doesnt apply the jquery mobile themes.

here is my javascript:

  1.     //Dynamically load data fields for items
  2.     $(document).on('pagebeforeshow', '#claimPagefields', function(){ 
  3.      //trigger a create event
  4.      $('#claimPagefield').trigger('create');
  5.         loadFields();
  6.     });


Here is my HTML page

  1.     <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.     <title></title>
  7.     <link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
  8.     <link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
  9.     <link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
  10.     <script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
  11.     <script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
  12.     
  13.     <script src="src/iscroll.js"></script>
  14.     <script src="src/jquery.mobile.iscrollview.js"></script>
  15.     <script src="src/script/itemFields.js"></script>
  16.     
  17.       <link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" /> 
  18.       <script src="src/jquery.ui.datepicker.js"></script>
  19.       <script src="src/jquery.ui.datepicker.mobile.js"></script>
  20.       
  21.       
  22.     </head>
  23.     
  24.     <body>
  25.     <div data-role="page" id="claimPagefields">
  26.       <div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > <a href="" onclick="history.back(-1); return false;">Back</a>
  27.         <h1>New Claim</h1>
  28.       </div>
  29.       <div data-role="content">
  30.         <ul class="ui-li" data-role="listview" id="claimTypelistfields" data-inset="true"  data-scroll="true">
  31.           <li data-role="list-divider">
  32.             <h2 id="itemTitle">Title</h2>
  33.           </li>
  34.      
  35.           
  36.         </ul>
  37.         <div data-role="navbar">
  38.           <ul>
  39.             <li><a href="some.html" data-theme="b">Save</a></li>
  40.           </ul>
  41.         </div>
  42.       </div>
  43.     </div>
  44.     </body>
  45.     </html>

It doesnt apply the theme on the input fields itself which typically look like this when i am adding it

  1.      listItem = '<li id="reasons">' +
  2.             '<h3>Reasons:</h3>' +
  3.             '<div data-role="fieldcontain">' +
  4.               '<input type="text" name="reasons" id="textFieldReasons" value="" />' +
  5.             '</div>' +
  6.           '</li>';
  7.       
  8.      $('#claimTypelistfields').append(listItem);
  9.       
  10.      $('#claimTypelistfields').listview('refresh');

If i manually add this snippet of code to the above input field manually

  1.     style="width:100%"

It works and resizes the width only but i am trying to see if there is way to apply it once instead of having to apply the themes all manually for each field!

Thanks