Question

我正在尝试使用jQuery添加已使用格式的列表项。但是，如果第一个元素（顶部元素）具有正确的格式，则下面的元素（在按下“添加条目”后添加）不具有相同的格式。整个代码如下，但我已经提取了创建条目的函数。

<button onclick="myFunction()">Add entry</button>
<script>
function myFunction() {
    $("#myList").append('<ul  data-role="listview" data-input="#myFilter" data-inset="true"><li id="contact1"><a href="#">testContact</a></li></ul>');
}
</script>

整个代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" 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.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    
    <div data-role="page" id="pageone">
      <div data-role="panel" id="contactPanel"> 
            <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-home ui-btn-icon-left">Home</a>
        <form class="ui-filterable">
          <input id="myFilter" data-type="search">
        </form>
        <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
          <li><a href="#">Adele</a></li>
          <li><a href="#">Agnes</a></li>
          <li><a href="#">Albert</a></li>
          <li><a href="#">Billy</a></li>
          <li><a href="#">Bob</a></li>
          <li><a href="#">Calvin</a></li>
          <li><a href="#">Cameron</a></li>
        </ul>
    
      </div> 
    
      <div data-role="panel" id="dialPanel" data-position-fixed="true"> 
       <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-home ui-btn-icon-left">Home</a>
        <h2>Dial a Number</h2>
        <p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>
      </div> 
    
      <div data-role="header">
               <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">&#9776;</a>
        <h1>Chapar</h1>
         <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-right">Search</a>
    
    <!--  </div>
        <div data-role="main" class="ui-content">
        <a href="#contactPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Contacts</a>
        <a href="#myPanelFixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Dial Pad</a>
      </div>  -->
      <!--Buttons -->
        <div data-role="navbar">
          <ul>
            <li><a href="#contactPanel" data-icon="search">Contacts</a></li>
            <li><a href="#dialPanel" data-icon="search">Dial Pad</a></li>
            <li><a href="#" data-icon="info">Help</a></li>
          </ul>
        </div>
    
        <!-- Recent contacts-->
        <div id="myList">
         <ul  data-role="listview" data-input="#myFilter" data-inset="true">
          <li id="contact1"><a href="#">testContact</a></li>
         </ul>
         </div>
    
    <button onclick="myFunction()">Add entry</button>
    
    <script>
    function myFunction() {
        $("#myList").append('<ul  data-role="listview" data-input="#myFilter" data-inset="true"><li id="contact1"><a href="#">testContact</a></li></ul>');
    }
    </script>
    
      <div data-role="footer">
        <h1>Page Footer</h1>
      </div> 
    </div> 
    
    </body>
    </html>

它的外观如下：

Answer 1

添加ul元素后，为最后一个附加的ul调用listview()函数。

代码示例：$("#myList > ul").last().listview();

请查看下面的代码段

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" 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.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    
    <div data-role="page" id="pageone">
      <div data-role="panel" id="contactPanel"> 
            <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-home ui-btn-icon-left">Home</a>
        <form class="ui-filterable">
          <input id="myFilter" data-type="search">
        </form>
        <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
          <li><a href="#">Adele</a></li>
          <li><a href="#">Agnes</a></li>
          <li><a href="#">Albert</a></li>
          <li><a href="#">Billy</a></li>
          <li><a href="#">Bob</a></li>
          <li><a href="#">Calvin</a></li>
          <li><a href="#">Cameron</a></li>
        </ul>
    
      </div> 
    
      <div data-role="panel" id="dialPanel" data-position-fixed="true"> 
       <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-home ui-btn-icon-left">Home</a>
        <h2>Dial a Number</h2>
        <p>You can close the panel by clicking outside the panel, pressing the Esc key, by swiping, or by clicking the button below:</p>
      </div> 
    
      <div data-role="header">
               <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">&#9776;</a>
        <h1>Chapar</h1>
         <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-right">Search</a>
    
    <!--  </div>
        <div data-role="main" class="ui-content">
        <a href="#contactPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Contacts</a>
        <a href="#myPanelFixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Dial Pad</a>
      </div>  -->
      <!--Buttons -->
        <div data-role="navbar">
          <ul>
            <li><a href="#contactPanel" data-icon="search">Contacts</a></li>
            <li><a href="#dialPanel" data-icon="search">Dial Pad</a></li>
            <li><a href="#" data-icon="info">Help</a></li>
          </ul>
        </div>
    
        <!-- Recent contacts-->
        <div id="myList">
         <ul  data-role="listview" data-input="#myFilter" data-inset="true">
          <li id="contact1"><a href="#">testContact</a></li>
         </ul>
         </div>
    
    <button onclick="myFunction()">Add entry</button>
    
    <script>
    function myFunction() {
        $("#myList").append('<ul  data-role="listview" data-input="#myFilter" data-inset="true"><li id="contact1"><a href="#">testContact</a></li></ul>')
        
       $("#myList > ul").last().listview();
    }
    </script>
    
      <div data-role="footer">
        <h1>Page Footer</h1>
      </div> 
    </div> 
    
    </body>
    </html>

此外，如果您想要添加到现有的ul，您可以使用listview('refresh')刷新列表视图。

Answer 2

您可以使用clone（）函数获取列表的精确副本，然后附加到父元素。

function myFunction() {
    var clone = $("#myList ul:first").clone();
    $("#myList").append(clone);
}

Fiddle

使用jQuery在HTML中添加list元素

2 个答案: