与jQueryMobile时髦pagecreate问题

-1

这是我的简化代码，其中有两个页面链接到对方。结果是page2 count警报总是说在DOM中有一个＃page2 div。但是，每当page2.html被引用时，pagecreate就会触发。第一次是1，第二次是2，依此类推...与jQueryMobile时髦pagecreate问题

有人可以解释发生了什么以及如何获得页面2的一个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

来源

2012-03-21 emsieja

JQM载入后续页面到使用Chrome存在的调试器/开发工具，你可以很容易地看到这种情况发生在同一DOM（页）。

在随后的页面中，它会在你的标签之间插入任何东西，但忽略其他所有内容，你可以在你的或其他页面上放置JS，它仍然只能拉入page2。

你到底发生了什么事情是，当你第一次加载＃page2它正确地将一个活动事件添加到＃page2，然后你导航到index.html，但＃page2仍然在你的DOM。现在，当你转到＃第2页再次，它将运行您的JS再次

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

这又结合您的警报，以及2个事件触发，下一次3会火。

你应该做的是在开始装载所有的JS和监听pageinit/pageshow，看到我的其他职位的方式：https://stackoverflow.com/a/9085014/737023

或者，如果你有任何问题，请在这里

来源

2012-03-21 16:38:05

是的，这有助于我现在理解它好得多。为了解决我的问题，我简单地将实时绑定移出page2.html并将其移入index.html中的头文件脚本中 - 现在，警报提示1＃page2 div元素和pagecreate每次引用page2.html时触发一次。谢谢！ – emsieja 2012-03-21 17:15:18

与jQueryMobile时髦pagecreate问题

回答

相关问题