Question

我正在尝试动态地（在按钮上单击）在切换开关内添加一个新的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>

Answer 1

因为您在渲染完所有内容后插入了List，所以很可能必须使用.enhanceWithin（）来渲染新项目。方法

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

JQuery mobile动态添加切换切换到listview

1 个答案: