Question

这是我的简化代码，它有两个相互链接的页面。结果是page2计数警报总是说DOM中有一个#page2 div。但是每次引用page2.html时都会触发pagecreate。第一次是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

Answer 1

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

在后续页面中，它会在您的标签之间插入任何内容，但忽略其他所有内容，您可以在您或其他页面中使用JS，而且它仍然只会拉入第2页。

你究竟发生了什么事情，当你第一次正确地向＃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

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

jQueryMobile的Funky pagecreate问题

1 个答案: