2

我的 index.html 看起来像这样：

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
    <list rel="stylesheet" href="css/app.css" />
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/underscore.js"></script>
    <script type="text/javascript" src="js/backbone.js"></script>
    <script type="text/javascript" src="js/views/attachmentlist.js"></script>
    <script type="text/javascript" src="js/models/attachmentmodel.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script src="js/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0rc1.js"></script>
    </head>

    <body></body>

</html>

绝对没有这些文件有对 jQuery Mobile 的引用，只有索引有。

我的 app.js 文件如下所示：

$(document).live("mobileinit", function () {
    console.log('in Mobile Init');
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;

    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').live('pagehide', function (event, ui) {
        $(event.currentTarget).remove();
    });
});

某些东西导致“移动初始化”触发两次。我不确定它是什么，或者即使它真的是一个问题，但感觉就像是不应该发生的事情。
有什么办法可以解决这个问题吗？

编辑
我实际上只是注意到，如果我将一个简单的“脚本”标签直接放入正文并在那里执行 console.log，它会运行两次....sooo....这段代码中的某些内容导致我的整个页面初始化两次。
事实上，它实际上看起来好像我的整个设置加载了两次。我将 console.logs 放置在应用程序首次加载时发生的事情的整个链中，并且一切都发生了两次。

4

2 回答 2

1

我曾经遇到过类似的事情。对于它的价值，这就是我解决它的方法：

$(document).bind("mobileinit", function() {
  $.extend(  $.mobile , {
    autoInitializePage: false,
    loadingMessage: false
  });
});

如果我必须使其适应您的代码，请尝试以下操作：

$(document).live("mobileinit", function () {
    console.log('in Mobile Init');

    $.extend(  $.mobile , {
        autoInitializePage: false,
        loadingMessage: false
    });

    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;

    // Remove page from DOM when it's being replaced
    $('div[data-role="page"]').live('pagehide', function (event, ui) {
        $(event.currentTarget).remove();
    });
});

附带说明一下，您不应该使用 jQuery 的.live()函数。根据他们自己的文档：

从 jQuery 1.7 开始，该.live()方法已被弃用。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该.delegate()优先使用.live().

于 2012-05-17T18:32:25.007 回答
1

这可能不是你想听到的答案，但我相信这确实是我能给你的最有用的建议。

如果可能的话，我强烈建议您摆脱 Jquery mobile。我最近在一个团队工作，该团队在使用 Jquery mobile 执行此类操作时遇到问题。如果您在加载页面时发生了任何异步代码，那么让 Jquery mobile 的事件与您自己的事件同步几乎是不可能的。

如果您需要为您的移动网站提供无缝、原生的感觉，我强烈建议您尝试 Spine 和 RequireJS。根据您的设计限制，Spine Mobile 也可用，并且会为您完成一些工作。

Jquery mobile 本质上是在欺骗浏览器，让浏览器认为您的网站是一个单页应用程序，因此最终会让人感觉非常笨拙。如果您有时间备份并正确执行，并实际构建一个真正的单页应用程序，您最终将获得更干净、更可靠的代码和更可用的应用程序。

抛弃 Jquery 手机。您的开发团队和您的用户会感谢您。

编辑：现在是 2015 年，所以也许不要再使用 Spine 和 Require 了。试试 Webpack 和 React！但绝对不要使用 Jquery mobile，除非你想要更多这样的问题。

于 2012-05-17T18:40:42.540 回答