jQuery Mobile:动态生成的导航栏按钮不保持其活动状态

Question

我有一个非常简单的jQuery移动页面，标题中有一个持久的导航栏，按钮链接到"页面"(data role="page">项)。

所有操作都很好，导航栏上的按钮在您从一页导航到另一页时会突出显示。

我的问题是，我想在服务器端(用PHP)动态生成这些导航条。但是，当您使用ajax添加导航栏时，ui-btn-active和ui state persisten类似乎无法正常工作，按钮也不再像预期的那样突出显示/持久化。

假设我有一个定义了导航条的页面：

<div data-role="page" id="settings" data-theme="a">

我能演示的最简单的例子是替换如下内容：

var htmlContent = $("#settings").html();
$("#settings").html(htmlContent); 

这样做会导致按钮不再保持其活动状态。就好像导航栏已经与jQuery的感知"断开"了，我需要重新同步DOM或其他什么。

有趣的是，我认为导航栏本身也没有正确地保持；尽管它在替换内容后不会移入和移出，但被替换页面上的页面内容显示在导航栏后面的(因此我下面的示例中的所有br)。

伙计，我希望这是有道理的：)

这是我的全部样品。。。在头标签中：

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
function loadSomeHTML() {
var htmlContent = $("#settings").html();
$("#settings").html(htmlContent); 
}
</script> 

以下是正文标签中的内容：

<div data-role="page" id="welcome" data-theme="a">
<div data-role="header" data-position="fixed" data-id="TestPersist">
<div data-theme="" data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink">
Schedules
</a>
</li>
<li>
<a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink">
Settings
</a>
</li>
</ul>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="">
This is the welcome page
</div><!-- /content -->
</div>
<div data-role="page" id="schedule" data-theme="a">
<div data-role="header" data-position="fixed" data-id="TestPersist">
<div data-theme="" data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink ui-btn-active ui-state-persist">
Schedules
</a>
</li>
<li>
<a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink">
Settings
</a>
</li>
</ul>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="">
This is the sched page
<input type="button" value="Replace content in settings page" onclick="loadSomeHTML();">
</div><!-- /content -->
</div>
<div data-role="page" id="settings" data-theme="a">
<div data-role="header" data-position="fixed" data-id="TestPersist">
<div data-theme="" data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#schedule" id="navbar_schedule" data-theme="" data-icon="grid" class="navlink">
Schedules
</a>
</li>
<li>
<a href="#settings" id="navbar_settings" data-theme="" data-icon="gear" class="navlink ui-btn-active ui-state-persist">
Settings
</a>
</li>
</ul>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="">
<br><br><br><br><br><br><br>This is the settings page
</div><!-- /content -->
</div>

Answer 1

nah不要制作一堆标题：)

众所周知，jqm会使动态更新数据属性变得困难，但也没那么糟糕。

如果有人感兴趣，这里有一个技巧-只要你愿意放弃ui-btn活动类并使用主题(当然你可以自定义)，那么你可以在大约2分钟内启动并运行它。

所需读数：http://jquerymobile.com/test/docs/buttons/buttons-options.html

显然，您需要将yr头模板/标记作为静态页面包含在yr动态内容之上，这样才能工作——我从您的问题中假设这是您想要做的，而不是为非动态内容包含php，在这种情况下，解决方案将是一个更明显的服务器端解决方案。

无论如何，

示例导航条链接的html标记

<li><a href="javascript:;" id="nav_billing" class="panes" rel="#billing" data-role="button" data-theme="b" data-icon="minus" data-iconpos="right">Billing Info</a></li>
<li><a href="javascript:;" id="nav_shipping" class="panes" rel="#shipping" data-icon="minus" data-role="button" data-iconpos="right">Shipping Info</a></li>
<li><a href="javascript:;" id="nav_payment" class="panes" rel="#checkout" data-icon="minus" data-role="button" data-iconpos="right">Payment Info</a></li>

这里要注意的重要一点是，您将为活动类分配一个数据主题，而不是分配一个活动类，即ui-btn-active，只是为了确保我也在每个链接中添加datarole="button"：)

---

现在是文档末尾的零件：

$( document ).bind( "mobileinit", function(){
$.mobile.button.prototype.options.initSelector = ".panes";
});

是的，我们在这里所做的就是自动初始化这些按钮，这样我们就可以使用这样的东西：

$('a').buttonMarkup({ theme: "a" });

剩下的只是组装点击器(注意点击功能)：

// 100% untested and sure to not work as is 
$(".panes").on('click', function () {
// turn our clicked link into theme b aka active
$(this).buttonMarkup({ theme: "b" });
// works nice with icons too
$(this).buttonMarkup({ icon: "check" });
// grab all sibling links and turn them to theme a
// this probably won't work without accounting for the actual markup :)
$(this).siblings().buttonMarkup({ theme: "a" }); 
});