Question

我有以下代码，我试图附加到ul（无序列表）标签，但这些元素对jquery mobile CSS没有任何影响。

<!--html code were i am appending to -->

  <h3><center>student table </center></h3>

  <ul data-role="listview" data-filter="true" data-filter-placeholder="Enter Roll No Or Name..." data-inset="true" id="student_list">

    <li data-role="list-divider"></li>

    <li><h2>Roll No: 1</h2><h2 class="ui-li-aside">Name: John Walker</h2><h5><input class="inline" type="text" name="text-1" id="text-1" Placeholder="Enter Marks" value=""><button class="ui-btn ui-btn-b ui-corner-all">Button</button></h5></li>

    <li data-role="list-divider"></li>

  </ul>

js文件代码：

//JS code to append more list //

          data : { type:"fetch_student", fbi:fbi},
          success :function(html){
          console.log(html);
          jQuery.each(html,function(key,value){
          var dat = jQuery("#student_list");
          console.log(value);
          var li_divi = '<li data-role="list-divider" class="ui-li-divider ui-bar-inherit"></li>';
          var li_stud = '<li><h2>Roll No: '+value.id+'</h2><h2 class="ui-li-aside">Name: '+value.name+'</h2><h5><input class="inline" type="number" name="text-1" id="text-1" placeholder="Enter Marks" value=""><button class="ui-btn ui-btn-b ui-corner-all">Save</button></h5></li>';
          dat.append(li_divi);
          dat.append(li_stud);  
          });

我的结果如下：My Screen

这是整个HTML页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
  <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
  <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
  <link rel="stylesheet" type="text/css" href="css/global.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
<body>
 <div role="main" class="ui-content">
 <h3><center>student table </center></h3>
      <ul data-role="listview" data-filter="true" data-filter-placeholder="Enter Roll No Or Name..." data-inset="true" id="student_list">
     <li data-role="list-divider"></li>
      <li><h2>Roll No: 1</h2><h2 class="ui-li-aside">Name: John Walker</h2><h5><input class="inline" type="text" name="text-1" id="text-1" Placeholder="Enter Marks" value=""><button class="ui-btn ui-btn-b ui-corner-all">Button</button></h5></li>
      <li data-role="list-divider"></li>
      </ul> 
 </div>
 </body>
 </html>

jQuery Mobile对附加HTML标记没有影响

0 个答案: