0

我目前正在构建一个移动站点，但在集成自定义 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，因为我的页面有动态内容，并且无法提供缓存页面。

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

4

3 回答 3

0

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

var hasDownload = false;
$(document).on("pageinit", "#mypage",function(event){
    if (hasDownload === false) {
        hasDownload = true;
        // do some work
    }
);
于 2014-08-01T03:06:04.730 回答
0

Try substituting your $(document).on("pageshow",...) with $(document).one("pageshow", ...), which restricts the event to one call http://api.jquery.com/one/.

The problem is that using on in the inline script creates a new event each time the page is loaded. So the first time you load the page, the inline script is executed and the pageshow event is triggered. The second time a new event is triggered again, but the first one is still listening to content-one pageshow. In fact, if you repeat the process you'll see the log three, four, ... times.

Another option could be to create a script in the head section which sets up all required triggers in $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...). In this case, the script will only be initialized once, so it will work.

于 2014-03-21T00:10:52.057 回答
0

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

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

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

于 2015-07-25T14:52:07.453 回答