title: Jquery mobile dynamic fields not applying styles?
body: <p>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.</p>
  
  <p>here is my javascript:</p>
  
  <pre><code>//Dynamically load data fields for items
  $(document).on('pagebeforeshow', '#claimPagefields', function(){ 
      //trigger a create event
      $('#claimPagefield').trigger('create');
      loadFields();
  });
  </code></pre>
  
  <p>Here is my HTML page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" /&gt;
  &lt;link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" /&gt;
  &lt;script src="src/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="src/iscroll.js"&gt;&lt;/script&gt;
  &lt;script src="src/jquery.mobile.iscrollview.js"&gt;&lt;/script&gt;
  &lt;script src="src/script/itemFields.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" /&gt; 
    &lt;script src="src/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
    &lt;script src="src/jquery.ui.datepicker.mobile.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div data-role="page" id="claimPagefields"&gt;
    &lt;div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" &gt; &lt;a href="" onclick="history.back(-1); return false;"&gt;Back&lt;/a&gt;
      &lt;h1&gt;New Claim&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div data-role="content"&gt;
      &lt;ul class="ui-li" data-role="listview" id="claimTypelistfields" data-inset="true"  data-scroll="true"&gt;
        &lt;li data-role="list-divider"&gt;
          &lt;h2 id="itemTitle"&gt;Title&lt;/h2&gt;
        &lt;/li&gt;
  
  
      &lt;/ul&gt;
      &lt;div data-role="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="some.html" data-theme="b"&gt;Save&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It doesnt apply the theme on the input fields itself which typically look like this when i am adding it</p>
  
  <pre><code> listItem = '&lt;li id="reasons"&gt;' +
          '&lt;h3&gt;Reasons:&lt;/h3&gt;' +
          '&lt;div data-role="fieldcontain"&gt;' +
            '&lt;input type="text" name="reasons" id="textFieldReasons" value="" /&gt;' +
          '&lt;/div&gt;' +
        '&lt;/li&gt;';
  
           $('#claimTypelistfields').append(listItem);
  
           $('#claimTypelistfields').listview('refresh');
  </code></pre>
  
  <p>If i manually add this snippet of code to the above input field manually</p>
  
  <pre><code>style="width:100%"
  </code></pre>
  
  <p>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!</p>
  
  <p>Thanks</p>