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

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

1 个答案: