Jquery Mobile pageshow 事件触发两次答案

【问题标题】：Jquery Mobile pageshow event firing twiceJquery Mobile pageshow 事件触发两次
【发布时间】：2014-01-24 21:20:30
【问题描述】：

我目前正在构建一个移动网站，但在集成自定义 JQuery 小部件时遇到了问题。由于某种原因，无论哪个页面先加载，pageshow 事件都会触发两次。

为了便于理解，我创建了两个 HTML 页面

第 1 页

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>One</title>

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).on("mobileinit", function () {
        $.mobile.changePage.defaults.reloadPage = true;
    });
    </script>
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>

</head>
<body id="default">
    <div data-role="page" id="content-one">
        <div role="main" class="ui-content" id="one-content">
            One<br/>
            <a href="two.html">back to two</a>
        </div>
        <script type="text/javascript">
        (function($, undefined) {
            $.widget("test.stuff", {
                _create : function() {
                    console.log("create");
                },
                _init : function() {
                    console.log("_init");
                },
                destroy: function () {
                    this.element.empty();
                    $.Widget.prototype.destroy.call(this);
                }
            });
        })(jQuery);
        </script>
        <script type="text/javascript">
        $(document).on("pageshow", "#content-one", function () { 
            console.log("pageshow1");
            $("#content-one").stuff({});
        });
        $(document).on("pagebeforeshow", "#content-one", function () { 
            console.log("pagebeforeshow1");
        });
        </script>
    </div>
</body>
</html>

第 2 页

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Two</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">  </script>
    <script type="text/javascript">
    $(document).on("mobileinit", function () {
        $.mobile.changePage.defaults.reloadPage = true;
    });
    </script>
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>

</head>
<body id="default">
    <div data-role="page" id="content-two">
        <div role="main" class="ui-content">
            Two<br/>
            <a href="one.html">back to one</a>
        </div>
        <script type="text/javascript">
        $(document).on("pageshow", "#content-two", function () { 
            console.log("pageshow2");
        });
        $(document).on("pagebeforeshow", "#content-two", function () { 
            console.log("pagebeforeshow2");
        });
        </script>
    </div>
</body>
</html>

要首先重新创建加载页面，请使用链接导航到第二页，然后使用链接导航到第一页。

当第一个页面再次加载时，pageshow 事件被触发两次。我将 reloadPage 设置为 true，因为我的页面有动态内容，我无法提供缓存页面。

我很可能错误地使用了这些事件。

【问题讨论】：

reloadPage 已弃用，不能再设置为选项。而是使用$.mobile.pageContainer.pagecontainer("change", "page.html", { reload: true }); 加载页面并以编程方式重新加载它。此外，pageshow 已弃用但仍在运行，请使用 $(document).on("pagecontainershow", function () { code });。
如果我不应该使用 reloadPage 我应该使用什么机制来确保每次都加载每个页面并且不会从缓存中拉出？我希望这是所有导航的默认功能。
reload 而不是 reloadPage。

标签： jquery-mobile jquery-mobile-ajax

【解决方案1】：

尝试将您的$(document).on("pageshow",...) 替换为$(document).one("pageshow", ...)，这会将事件限制为一次呼叫http://api.jquery.com/one/。

问题是每次加载页面时，在内联脚本中使用on 都会创建一个新事件。所以第一次加载页面时，会执行内联脚本并触发 pageshow 事件。第二次再次触发新事件，但第一次仍在收听 content-one pageshow。事实上，如果你重复这个过程，你会看到日志三、四、...次。

另一种选择是在 head 部分创建一个脚本，该脚本在 $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...) 中设置所有必需的触发器。在这种情况下，脚本只会被初始化一次，所以它会起作用。

【讨论】：

【解决方案2】：

浪费了大约 2 个小时试图在此处和其他网站上进行所有修复。我放弃了，并在其中添加了一个 if 语句以防止它再次触发

var hasDownload = false;
$(document).on("pageinit", "#mypage",function(event){
    if (hasDownload === false) {
        hasDownload = true;
        // do some work
    }
);

【讨论】：

【解决方案3】：

尝试在隐藏事件中删除页面，如下所示：

$(document).on("mobileinit", function () {
        $.mobile.changePage.defaults.reloadPage = true;
        $(docuement).on('pagehide', function (event, ui) {
            $(event.target).remove();
        });
    });

请记住，如果您不禁用 ajax，所有请求都将使用 AJAX

【讨论】：