how to enhance dynamically created select menu in jquery mobile

Question

I use multi-page template (JQM) and created a single html file with 2 pages (Page0 and Page1). Both pages have the same selectmenu element, which is dynamically created during page load.

For some reason, selectmenu element in Page1 has some style issues (it looks that some css style has not been applied correctly and/or the element has not been correctly enhanced), whereas the one in the main page seems to be alright.

Please visit the following link to see the issue in action:

http://jsfiddle.net/dalsword/pdnpyh5h/5/

<div data-role="page" id="first">
  <div data-role="header">
    <h3>
      First Page
      <a href='#second' class='ui-btn-right ui-icon-back ui-btn ui-corner-all ui-shadow'>NEXT</a>
    </h3>
  </div>

  <div data-role="content">
    <div class='ui-field-contain'>
      <label for='g1'>SELECT MENU</label>
      <select id='g1' data-native-menu='false'>
      </select>
    </div>
  </div>
</div>

<div data-role="page" id="second">
  <div data-role="header">
    <h3>
      First Page
    </h3>
  </div>

  <div data-role="content">
    <div class='ui-field-contain'>
      <label for='g2'>SELECT MENU</label>
      <select id='g2' data-native-menu='false'>
      </select>
    </div>

  </div>

</div>


$(document).ready(function(e) {


  var content = "<option value='1'>element 1 </option>";
  content += "<option value='2'>element 2 </option>";
  content += "<option value='3'>element 3 </option>";
  content += "<option value='4'>element 4 </option>";
  content += "<option value='5'>element 5 </option>";


  var mySelect = $('#g1');
  mySelect.empty().append(content);
  mySelect.selectmenu().selectmenu('refresh');

  var mySelect = $('#g2');
  mySelect.empty().append(content);
  mySelect.selectmenu().selectmenu('refresh');


});

I use:

• Jquery mobile 1.4.5
• Jquery 1.11.1

Any suggestions?

Answer 1

On the second menu, changing

mySelect.selectmenu().selectmenu('refresh');

to

mySelect.selectmenu('refresh');

will work because the 2nd selectmenu is already initialized.

JSFiddle Example