Question

我有一个单页jQuery Mobile应用程序，其中有四个＆＃34; data-role =＆＃39;页面＆＃39;＆＃34;到位;所以，基本上，它是一个带有四个＆＃34;页面的HTML文档。＆＃34;

每个＆＃34;页面＆＃34;还有一个导航页脚，我通过javascript动态填充。我定义了一个名为＆＃34; theFooter，＆＃34;的变量。并分配了所有我的空页脚div（类别为＃34;页脚＆＃34;），如下所示：

$('.footer').html(theFooter);

现在，为了使其正常工作，我必须在创建的页面之前填充这些页脚，否则jQuery Mobile不会应用它的框架使页脚栏看起来像移动应用程序导航栏。所以我通过这个实现了这个目标：

$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that     the 'page' has been run
    $('.footer').html(theFooter);
});

它就像一个梦，第一次出现。让我们假设页面是＆＃34; about，＆＃34; ＆＃34;接触，＆＃34; ＆＃34;任务，＆＃34;和＆＃34;日历＆＃34; ...

点击＆＃34;关于＆＃34; ...完美。

点击＆＃34;联系＆＃34; ..完美。

您可以为每个＆＃34;页面执行此操作，＆＃34;每次＆＃34; pagebeforecreate＆＃34;被解雇，页脚看起来很棒。

然而，如果现在你点击，说，＆＃34;关于＆＃34;再次（或您已经访问过的任何一个），页面过渡和内容到位，但没有JQUERY MOBILE FORMATTING。而且它没有触发＆page 39创建＆＃39; pagebeforecreate＆＃39;再次起作用，这是有意义的，因为它已经是第一次创建。

我尝试过使用＆＃39; pageinit＆＃39;和＆＃39; pagebeforeshow＆＃39;发射，但无处可去。

我尝试过.trigger（）和.page（）方法......并且无处可去。

有人可以解释如何制作JQuery Mobile格式化棒吗？

Answer 1

如果你在小部件的父元素上调用.trigger('create')，你可以在任何时间点增强它的标记：

$( "div[data-role='page']").live('pagebeforecreate', function (evt) {
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that     the 'page' has been run
    $('.footer').html(theFooter).trigger('create');
});

Answer 2

enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/>
<link rel="stylesheet"  href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title>

<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create');
    });
</script>
</head>

<body>
omt
<div>
    <div id="omtList">  


    </div><!--/content-primary -->  
</body>
</html>

JQuery Mobile Widget在重新访问时不对动态内容进行格式化

2 个答案: