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

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文件中。 我已经尝试了2种方法

首先：

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之前触发。 要查找有关此主题的更多信息，请查看此文章或在此处找到。

相反，您应该使用适当的jQuery Mobile页面事件。

我为您提供了一个有效的jsFiddle 示例 。

$(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>');
});