jQuery Mobile 的时髦页面创建问题答案

【问题标题】：Funky pagecreate issue with jQueryMobilejQuery Mobile 的时髦页面创建问题
【发布时间】：2012-04-06 01:35:20
【问题描述】：

这是我的简化代码，它有两个相互链接的页面。结果是 page2 计数警报总是说 DOM 中有一个 #page2 div。但是 pagecreate 会在每次引用 page2.html 时触发。第一次是1，第二次是2，以此类推……

有人可以解释发生了什么以及如何为 page2 获取一个 pagecreate 事件吗？

index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
    <script src="jquery-1.6.4.min.js"></script>
    <script src="jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="content">
            <h3>In Index Page</h3>
            <a href="page2.html" data-role="button">Go To Page2</a>
        </div>
     </div>
</body>
</html>


page2.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="page2" data-role="page">
        <div data-role="content">
            <a href="index.html" data-role="button">Back</a>
        </div>
        <script type="text/javascript">
            alert("page2 count is " + $("#page2").length);
            $("#page2").live('pagecreate',function(event, ui) {
                alert("in page2 on pagecreate");
            });
        </script>
    </div>
</body>
</html>

Thanks,
-- Ed

【问题讨论】：

标签： javascript jquery caching dom jquery-mobile

【解决方案1】：

jQM 使用带有 Chrome 的调试器/开发工具将后续页面加载到同一个 DOM（页面）中，您可以很容易地看到这种情况发生。

在随后的页面中，它会在您的标签之间拉入任何内容，但会忽略其他所有内容，您可以在您的页面或其他页面中添加 JS，但它仍然只会拉入 page2。

实际发生的情况是，当您第一次加载 #page2 时，它会正确地将实时事件添加到 #page2，然后您导航到 index.html，但 #page2 仍保留在您的 DOM 中。现在当你再次转到#page2 时，它会再次运行你的 JS

 $("#page2").live('pagecreate',function(event, ui) {
        alert("in page2 on pagecreate");
 });

这会再次绑定您的警报，并触发 2 个事件，下次触发 3 个。

您应该这样做的方式是在开始时加载所有 JS 并监听 pageinit/pageshow，请参阅我的另一篇帖子：https://stackoverflow.com/a/9085014/737023

如果您有任何问题，请在此处提问

【讨论】：

是的，这有助于我现在更好地理解它。为了解决我的问题，我只是将实时绑定从 page2.html 移到 index.html 中的标头脚本中——现在警报说 1 #page2 div 元素和 pagecreate 在每次引用 page2.html 时触发一次。谢谢！