jquery mobile动态添加元素不能正常工作

Question

我想动态添加li标签。
虽然添加了事件

listview（“refresh”）;

它似乎并不适用jquery mobile css。 我试过

listview（）。listview（“refresh”）;

下面的代码是我写的。 请将下面的代码保存为tmp.html并在本地主机上尝试。

在我的环境中，推入ADD btn时没有错误。

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
    $(document).bind('mobileinit', function() { 
    $.mobile.changePage.defaults.changeHash = false; 
    $.mobile.hashListeningEnabled = false; 
    $.mobile.pushStateEnabled = false; 
    }); 
</script> 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script> 
    function onAddBtn() { 
    $li = $('<li><p>a:</p><input type="text"><p>b:</p><input type="text"></li>'); 
    $("#SentenceList").append($li).listview("refresh"); 
    } 

    function onReady() { 
    $("#AddBtn").click(onAddBtn); 
    } 

    $(onReady); 
</script> 
<div data-role="page" id="AddPage"> 
    <header data-role="header" data-position="fixed" data-theme="b"> 
    <a data-role="button" data-rel="back" data-icon="back" style="background-color: gray;">Back</a> 
    <h1>Add Memo</h1> 
    </header> 
    <section data-role="content"> 
    <ul id="SentenceList" data-role="listview"> 
     <li> 
     <p>a:</p> 
     <input type="text"> 
     <p>b:</p> 
     <input type="text"> 
     </li> 
     <li> 
     <p>a:</p> 
     <input type="text"> 
     <p>b:</p> 
     <input type="text"> 
     </li> 
    </ul> 
    </section> 
    <a data-role="button" data-icon="plus" id="AddBtn">ADD</a> 
</div> 

Answer 1

你可以告诉JQM刷新列表视图后，提升输入：

$("#SentenceList").append($li).listview("refresh").enhanceWithin(); 

DEMO