如何调用函数来自动加载jQuery移动网站中的元素

Question

我想要做的是将我的导航栏 HTML 标记放在一个位置（以便于编辑）。 现在我的 index.html 正文内容如下所示：

<div data-role="page" id="SomePage">
    <div data-role="header">
        <h1>This is Page 1</h1>
    </div>
    <div data-role="navbar"></div>
</div>

并在标题中这样调用我的文件：

<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" language="javascript" src="app.js"></script>

在我的 app.js 文件中，我尝试加载导航栏。我已经尝试了两种方法

第一个：

var NavBar = function() {
$('div[data-role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

$(document).ready(function() {
    NavBar();
}); 

这会导致页面让应用程序显示我的链接，但它们就像没有列表样式的普通 ul 一样堆叠

我尝试的第二种方法是：

var NavBar = function() {
$('div:jqmData[role="navbar"]').html('<ul>' +
    '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
    '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
    '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
    '</ul>');
}

$(document).ready(function() {
    NavBar();
});

这导致根本看不到链接。

如何创建一个函数来在一个地方加载“导航栏”并使用 jQuery Mobile 样式？

Answer 1

document ready 不应与 jQuery Mobile 一起使用，它通常会在页面加载到 DOM 之前触发.要了解有关此主题的更多信息，请查看此 ARTICLE 或查找 HERE。

您应该使用正确的 jQuery Mobile 页面事件。

我让你成为一个工作的 jsFiddle example。

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});