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