jquery mobile，ajax listview未呈现正常退出答案

【问题标题】：jquery mobile, ajax listview is not rendered quit normallyjquery mobile，ajax listview未呈现正常退出
【发布时间】：2014-06-17 15:39:26
【问题描述】：

我在页面中有一个列表视图。我正在向该列表视图异步添加一个元素。当我添加它时，该元素不会像列表中的其他元素一样呈现：

那是html：

<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 

    <div  data-role="content">
        <ul data-role="listview">
            <li><input type="time" /></li>
            <li><button id="add" >Add input field </button></li>
        </ul>
    </div> 

    <div  data-role="footer"><h4>Footer</h4></div> 
</div>

这就是我将新的li 添加到列表视图的方式

$("#add").click(function(){
    $("#p1 [data-role=listview]").append('<li><input type="time" /></li>');
    $("#p1 [data-role=listview]").listview("refresh");
});

这是 js 小提琴： http://jsfiddle.net/73pSv/21/

另外，我想说我需要在运行时添加字段。我不会事先知道进入该列表的所有输入字段。所以基本上，在创建列表视图之后添加字段是我需要的（当程序运行时）。很抱歉造成混乱。

如果有人有好的建议，请告诉我。

提前致谢。

【问题讨论】：

标签： javascript html css listview jquery-mobile

【解决方案1】：

工作示例：http://jsfiddle.net/Gajotres/3K863/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="p1"> 
            <div  data-role="header"><h1>Header Page 1</h1></div> 

            <div data-role="content">
                <ul data-role="listview">
                    <li><input type="time" /></li>
                </ul>
            </div> 

            <div  data-role="footer"><h4>Footer</h4></div> 
        </div> 
    </body>
</html>

JavaScript：

$(document).on('pagebeforecreate', '#p1', function(){ 
    $("[data-role='listview']").append('<li><input type="time"/></li>');
});

不要使用 jQuery Mobile 准备好的文档。使用适当的页面事件，例如 pagebeforecreate 在我的例子中。您的问题是列表视图的非标准用法。虽然出于某种原因 jQuery Mobile 可以在页面初始化期间对其进行增强，但它不能使用 listview('refresh') 以编程方式进行，至少在您使用的版本中没有。

它在我的示例中有效，因为在初始页面标记增强过程开始之前附加了内容。

更新：

这是另一个例子：http://jsfiddle.net/Gajotres/J7QrF/

这个会起作用，因为代码在附加过程之前得到了增强。

【讨论】：

不，不完全是这样。当然谢谢兄弟。但我需要在运行时添加和删除字段，当我这样做时它没有正确呈现
我的意思是，在这种特殊情况下，beforepagecreate 不会有帮助。因为，我会知道在运行时（页面创建后）去那里的输入字段
抱歉，我没有阅读您对“它以编程方式使用 listview('refresh')，至少不在您使用的版本中。”的推荐。好的，谢谢 Gajotres。

【解决方案2】：

这就是你的做法：http://jsfiddle.net/73pSv/22/

需要在最后加上$('#p1').trigger('create');

【讨论】：