0

我在 jqmobile 应用程序中的 .trigger('create') 方法有一个奇怪的问题。

我正在尝试在整个站点上创建一些共享的、重复使用的页面。

这是我的 index.html；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>phonegap & jquery mobile boilerplate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile.structure.css"/>
    <link rel="stylesheet" href="css/jquery.mobile.theme.css"/>
    <script>
        var userAgent = navigator.userAgent + '';
        if (userAgent.indexOf('iPhone') > -1) {
            document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
            var mobile_system = 'iphone';
        } else if (userAgent.indexOf('Android') > -1) {
            document.write('<script src="js/lib/cordova-android.js"></sc' + 'ript>');
            var mobile_system = 'android';
        } else {
            var mobile_system = '';
        }
    </script>
    <script src="js/lib/jquery.js"></script>
    <!-- your scripts here -->
    <script src="js/app/app.js"></script>
    <script src="js/app/bootstrap.js"></script>
    <script src="js/lib/jquery.mobile.js"></script>
    <script src="js/globals.js"></script>
    <script src="js/logged_in.js"></script>
</head>
<body>
<div data-role="page">
    <div id="headerDiv" data-role='header'><a href="index.html" data-icon="home">Home</a>

        <h1>Jubilee Distributors</h1>
        <a href="login.html" id="logged_in" data-icon="home">Login</a></div>
    <div id="navDiv"></div>
    <div data-role="content">Blah Blah
    </div>

    <div id='footerDiv' data-role="footer"></div>

</div>
</body>
</html>

这是我共享的 nav.html：

<div data-role='navbar'>
    <ul>
        <li><a href="orders.html">Orders</a></li>
        <li><a href="clients.html">Clients</a></li>
        <li><a href="products.html">Products</a></li>
    </ul>
</div>

在 dom 准备就绪时，我正在 globals.js 文件中执行以下操作：

$(document).bind("mobileinit", function () {
    jQuery.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

$(function () {
    $('#navDiv').load('shared/nav.html').trigger('create');
    $('#footerDiv').load('shared/footer.html').trigger("create");
});

html 加载到 div 中没有问题，但触发器似乎没有做任何事情，因为它的样式.. 有什么我遗漏的吗？

干杯，

4

1 回答 1

0

试试这个，如果它不起作用，我们会尝试其他方法：

将 globals.js 放在 Jquery mobile 之前，如下所示：

   <script src="js/globals.js"></script>
   <script src="js/lib/jquery.mobile.js"></script>
   <script src="js/logged_in.js"></script>

如果这不起作用，请以这种方式重写您的最后一个函数：

$(function () {
    $('#navDiv').load('shared/nav.html', function(){$(this).trigger('create')});
    $('#footerDiv').load('shared/footer.html', function(){$(this).trigger('create')});
});

这样，在 jQM 增强之前，它会等到您的文件完全加载并插入到 DOM 中；

于 2012-11-27T00:39:01.977 回答