如何在jquery mobile中增强动态创建的选择菜单

Question

我使用多页模板 (JQM) 并创建了一个包含 2 个页面（Page0 和 Page1）的 html 文件。两个页面都有相同的 selectmenu 元素，该元素是在页面加载期间动态创建的。

由于某种原因，Page1 中的 selectmenu 元素存在一些样式问题（看起来某些 css 样式未正确应用和/或元素未正确增强），而主页中的那个似乎没问题.

请访问以下链接以查看实际问题：

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');


});

我用：

• jquery mobile 1.4.5
• jQuery 1.11.1

有什么建议吗？

Answer 1

在第二个菜单上，改变

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

到

mySelect.selectmenu('refresh');

将起作用，因为第二个选择菜单已经初始化。

JSFiddle Example