JQuery mobile动态添加切换开关到listview答案

【问题标题】：JQuery mobile dynamically add toggle switch to listviewJQuery mobile动态添加切换开关到listview
【发布时间】：2018-07-19 09:43:14
【问题描述】：

我正在尝试动态地（在单击按钮时）在 Toggle 开关内添加一个新的 Listview 项，但我只得到一个 Checkbox 里面。谁能解释一下，我该怎么办？

这是我的代码：

<!DOCTYPE html>
 <html>
  <head>
   <meta name='viewport' charset='utf-8' content='width = device-width, initial-scale = 1'>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   <script type = 'text/javascript'>
     function test(){
       $('#List').append("<li><a href='#'><input data-role='flipswitch' type='checkbox'></a></li>");
       $('#List').listview('refresh');}
   </script>
  </head>

  <body>
   <div data-role='page' id='first'>
    <div data-role='header' data-position='fixed' data-tap-toggle='false'>
     <h1>First Page</h1>
    </div>

    <div data-role='main' class='ui-content'>
     <input type='button' value='New Button' onclick=test()>

     <ul data-inset='true' id='List' data-role="listview">
      <li><a href='#'><input data-role='flipswitch' type='checkbox'></a></li>
      <!--Here append new Toggle Switch-->
     </ul>


    </div>
   </body>

  </html>

【问题讨论】：

标签： jquery mobile jquery-mobile dynamically-generated jquery-mobile-listview

【解决方案1】：

因为您是在所有内容都渲染后插入列表，所以您很可能必须使用 .enhanceWithin(); 来渲染新项目。方法。

function test(){
       $('#List').append("<li><a href='#'><input data-role='flipswitch' type='checkbox'></a></li>");
       $('#List').enhanceWithin();
}

【讨论】：