Question

我是jquery mobile的新手。

我需要帮助理解jquery mobile的document.ready（）的等价物。

我有2个jsp页面如下：

的Page1.jsp

<head>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page1', function(event){
    alert("page 1");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
  <header data-role="header">
  </header>
  <article data-role="content">
    page 1
  </article>
  <footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
    <ul>
      <li><a href="page2.jsp>" data-icon="arrow-r">Page 2</a></li>
    </ul>
</div>
</body>

page2.jsp

<head>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page2', function(event){
    alert("page 2");
});
</script>
</head>
<body>
<div data-role="page" id="page2">
  <header data-role="header">
  </header>
  <article data-role="content">
    page 2
  </article>
  <footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
    <ul>
      <li><a href="page1.jsp>" data-icon="arrow-l">Page 1</a></li>
    </ul>
</div>
</body>

因此，当我最初加载第1页时，我会收到警告“第1页”。但是当我导航到第2页时，我没有得到警告“第2页”

但是在第2页，我导航回到第1页，我收到警告“第1页”

那么，当我通过导航加载第2页时，为什么不能获得“第2页”警报？

我正在尝试学习jquery mobile，所以请解释和任何代码示例都有助于我理解它。

我试着阅读jquery移动文档，但没有理解它。

谢谢！

Answer 1

您的脚本未运行，因为它在技术上未加载。 jQuery Mobile通过拦截它们的正常功能（即导航到新页面）来跟踪链接，而是通过AJAX请求加载页面的内容。如果成功，则接受[data-role = page]元素并将其添加到现有页面。结果是新页面已加载，但您从未真正离开您开始的页面。

在此期间未加载任何不在[data-type = page]元素内的内容，包括脚本。您可以通过在page2的[data-role = page]元素中移动<script>标记来解决此问题。如果你这样做，请记住，加载的任何代码都会在加载其他页面时保留，并且你可能会开始以你从未想过的方式进行交互。

另一种选择是简单地强制jQuery Mobile在点击链接时实际导航到新页面。查看their documentation了解如何操作。

Jquery Mobile - $（document）.ready（function（）{}）;

1 个答案: