Question

我正在构建一个简单的应用程序，它在第一页上加载数据列表，然后让用户深入了解第二页上的项目的详细信息。两个页面都有AJAX调用，从服务器检索数据并显示它。我想在第二页加载时（无论是辅助页面还是主页面）执行数据检索。但是我已经尝试了jQuery Mobile 1.4.3文档中列出的每一种方法，但没有一种方法正常工作。

要明确的是，当repo.html单独加载时，它可以正常工作，但当它作为辅助页面加载时（在点击/点击事件之后），没有任何指定的事件有效。事实上，我已将每个相关事件写入演示页面进行测试。

<!-- repo.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>Chapter 5 - Repos</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css" />
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.mobile-1.4.3.js"></script>
</head>

<body>

    <div id="home_page" data-role="page">
        <div data-role="header"><h1>Popular Repos</h1></div>
        <div data-role="content">
            <ul id="results" data-role="listview" data-dividertheme="b">
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        $(document).on("hashchange", function(event){console.log(event)});
        $(document).on("mobileinit", function(event){console.log(event)});
        $(document).on("navigate", function(event){console.log(event)});
        $(document).on("pagebeforechange", function(event){console.log(event)});
        $(document).on("pagebeforecreate", function(event){console.log(event)});
        $(document).on("pagebeforehide", function(event){console.log(event)});
        $(document).on("pagebeforeload", function(event){console.log(event)});
        $(document).on("pagebeforeshow", function(event){console.log(event)});
        $(document).on("pagechange", function(event){console.log(event)});
        $(document).on("pagechangefailed", function(event){console.log(event)});
        $(document).on("pagechangefailed", function(event){console.log(event)});
        $(document).on("pagehide", function(event){console.log(event)});
        $(document).on("pageinit", function(event){console.log(event)});
        $(document).on("pageload", function(event){console.log(event)});
        $(document).on("pageremove", function(event){console.log(event)});
        $(document).on("pageshow", function(event){console.log(event)});
    </script>

</body>
</html>

当此页面作为辅助页面加载时，上述事件均不会触发。他们都不是。重新加载页面时，将按顺序触发以下事件：

jQuery.Event {type: "pagebeforechange", }
jQuery.Event {type: "pagebeforechange", }
jQuery.Event {type: "pagebeforecreate", }
jQuery.Event {type: "pageinit", }
jQuery.Event {type: "pagebeforeshow", }
jQuery.Event {type: "pageshow", }
jQuery.Event {type: "pagechange", }

我有什么遗漏吗？约会

Answer 1

如果您希望只发生一次，请使用文档就绪。将脚本放在每个页面的头部。见http://jsbin.com/ofuhaw/1538.html

jQuery mobile只会在初始页面加载时执行头文件。在ajax加载期间，它们将被完全忽略。当前在第2页上，它需要在每个页面上进行刷新。

如果你想避免在ajax请求上发送脚本（即使它被忽略）以避免传输额外的字节，你可以检查HTTP_X_REQUESTED_WITH标头，如果它等于xmlhttprequest不发送脚本tag，因为这意味着它是一个ajax请求。您可以在http://demos.jquerymobile.com/1.4.3/toolbar-fixed-persistent-optimized/

使用PHP查看此演示

在辅助页面加载时触发任意方法

1 个答案: