在基于jQuery Mobile的页面中将元素插入DOM [英] Inserting elements into the DOM in a jQuery Mobile based page
问题描述
我正在尝试一个jQuery Mobile应用程序，该应用程序最终将最终以非Web应用程序的形式出现在移动设备上，因此所有内容都必须是本地的.出于这个原因(我认为)，我需要在由data-role="page"标签描述的单个页面中构建应用程序，否则jQuery Mobile中的ajax加载机制似乎无法正常工作.
I'm experimenting with a jQuery Mobile app that will eventually end up as a non-Web app on a mobile device and so all the content has to be local. For that reason (I think) I need to construct the app in a single page delineated by data-role="page" tags otherwise the ajax loading mechanism in jQuery Mobile doesn't seem to work.
该应用程序将从本地存储数据库读取数据，并将其显示在页面上的无序列表中，使用jQuery Mobile对其进行样式设置，使其看起来像本机应用程序.
The app will read data from a local storage DB and display it on the page in an unordered list, styled using jQuery Mobile to look like a native app.
在我的$(document).ready()函数中，我执行数据库查找，并为每个结果在数据库结果周围创建一个<li>标记，然后调用$(".list").append(li_str);，其中.list是我的<ul>标记的类.
In my $(document).ready() function I execute the DB lookup and for each results, I create an <li> tag around my DB results and then call $(".list").append(li_str); where .list is the class of my <ul> tag.
页面呈现为好像没有jQuery Mobile一样-我在每个<li>中都看到了正确的数据，但是看起来并不正确.
The page renders as if jQuery Mobile isn't present - I see the correct data in each <li> but it doesn't look correct.
将此结果与我在页面HTML中对<li>标签进行硬编码的版本进行比较-看起来jQuery Mobile修改了标签并插入了许多新类，等等.
Comparing this result with a version where I hard code the <li> tags in the page HTML - it looks like jQuery Mobile modifies the tags and inserts a lot of new classes etc.
也许我需要在页面加载周期的早期从数据库构建页面?有什么建议吗?
Maybe I need to build the page from the DB earlier in the page load cycle? Any suggestions?
推荐答案
The problem is this issue. So, change your code:
<!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>
或者，您可以延迟创建列表视图，直到创建完所有元素为止(如链接线程中所述):
Alternately, you can delay creating the list view until all of the elements have been created (as described in the linked thread):
<!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);
}
}
$(function ()
{
build_dynamic_content();
$('ul.mainlist').listview();
});
</script>
</head>
<body>
<div data-role="page" id="list" data-fullscreen="false">
<div data-role="content">
<ul class="mainlist">
<li id="0"><a href="#">Test entry</a><img src="icon.png"/></li>
</ul>
</div>
</div>
</body>
</html>
对不起，代码转储；我无法在 jsfiddle 中工作.
Sorry for code dumps; I couldn't get this working in jsfiddle.
这篇关于在基于jQuery Mobile的页面中将元素插入DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
