Question

我目前有一个正在构建的移动网站，我在集成自定义JQuery小部件方面遇到了麻烦。出于某种原因，对于首先加载的页面，pageshow事件将触发两次。

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

Page 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，因为我的页面有动态内容，而且我无法提供缓存页面。

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

Answer 1

尝试将$(document).on("pageshow",...)替换为$(document).one("pageshow", ...)，将事件限制为一次通话http://api.jquery.com/one/。

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

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

Answer 2

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

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

Answer 3

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

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

请注意，如果您不禁用ajax，则所有请求都将使用AJAX

Jquery Mobile页面显示事件触发两次

3 个答案: