在基于jQuery Mobile的页面中将元素插入DOM_Jquery_Html_Jquery Mobile

在基于jQuery Mobile的页面中将元素插入DOM

jquery html jquery-mobile

在基于jQuery Mobile的页面中将元素插入DOM,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,我正在试验一个jQuery移动应用程序，它最终将成为移动设备上的非Web应用程序，因此所有内容都必须是本地的。因此（我认为）我需要在data role=“page”标记描述的单个页面中构建应用程序，否则jQuery Mobile中的ajax加载机制似乎不起作用该应用程序将从本地存储数据库中读取数据，并以无序列表的形式显示在页面上，使用jQuery Mobile将其设置为与本机应用程序类似的样式在我的$（document）.ready（）函数中，我执行数据库查找，对于每个结果，我在数据库结果周

我正在试验一个jQuery移动应用程序，它最终将成为移动设备上的非Web应用程序，因此所有内容都必须是本地的。因此（我认为）我需要在

data role=“page”

标记描述的单个页面中构建应用程序，否则jQuery Mobile中的ajax加载机制似乎不起作用

该应用程序将从本地存储数据库中读取数据，并以无序列表的形式显示在页面上，使用jQuery Mobile将其设置为与本机应用程序类似的样式

在我的

$（document）.ready（）

函数中，我执行数据库查找，对于每个结果，我在数据库结果周围创建一个

标记，然后调用$（.list”）.append（li_str）
其中.list
是我的
标记的类
页面呈现为jQuery Mobile不存在-我在每个
中都看到了正确的数据，但看起来不正确
将此结果与我在HTML页面中硬编码
标记的版本进行比较——看起来jQuery Mobile修改了标记并插入了许多新类等
也许我需要在页面加载周期的早期从数据库构建页面？有什么建议吗？
问题是。因此，请更改您的代码：
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script>
    function build_dynamic_content()
    {
        var num_entries = 5;

        for (var i = 0; i < num_entries; ++i)
        {
            var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + ( i + 1 ) + "</a>";
            li_str += "<img src=\"" + "icon.png" + "\" />";
            li_str += "</li>";

            $(".mainlist").append(li_str);
        }
    }
    </script>
</head>

<body>
    <div data-role="page" id="list" data-fullscreen="false">
        <div data-role="content">
            <ul class="mainlist" data-role="listview">
                <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
            </ul>
        </div>
    </div>
<script>build_dynamic_content();</script>
</body>
</html>


函数构建\动态\内容（）
{
var num_条目=5；
对于（变量i=0；i”；
li_str+=”；
li_str+=“
”；
$（“.mainlist”）.append（li_str）；
}
}



构建动态内容（）；


或者，您可以延迟创建列表视图，直到创建了所有元素（如链接线程中所述）：

函数构建\动态\内容（）
{
var num_条目=5；
对于（变量i=0；i”；
li_str+=”；
li_str+=“”；
$（“.mainlist”）.append（li_str）；
}
}
$（函数（）
{
构建动态内容（）；
$（'ul.mainlist'）.listview（）；
});




抱歉代码转储；我没能把这个问题解决。
马特的答案不是这个问题的一般答案。我已经在其他问题中多次提到了这一点
以上内容适用于listview，但一般不适用于任何内容
要在jQuery Mobile中向DOM添加元素，您需要了解.page（）函数
我做了一个关于这个的教程
调用$（“已更改的父元素”）.listview（）和$（“已更改的父元素”）.trigger（“创建”）对我来说都不起作用。
为了多次更改DOM内容并重做jQuery mobile样式，我需要：
$("changed-parent-element").listview("refresh");

版本：jquerymobile1.0rc2，看起来没有任何不同。我制作了一个没有DB的小测试应用程序，显示了这个问题。列表中的第一个条目是硬编码的，看起来是正确的。其余的都是动态生成的，不会：你能看到我做错了什么吗？@speed:不客气。pastebin肯定有帮助，尽管a或更好（下次：）无法访问此站点，这是不幸的，因为它包含OP问题的唯一正确答案。。。在：=>更新DOM后，对插入的元素调用触发器（'create'），如：$（'myelement'）.html（'updated content'）.trigger（'create'）；是的，我把网站迁移到了一个域名，我更新了大部分帖子，但是有太多几乎重复的帖子，我没有找到所有的。谢谢你的报道。
$("changed-parent-element").listview("refresh");