javascript - JQuery 手机 : When data-role ="page" 's JS generated content is created/remove?

Question

给定一个 one-html-multiple-pages 应用程序，在我的每个页面中，我计划 JS 注入(inject)长的 html 代码和动画，这可能很重。 HTML 代码如下:

<div data-role="page" id="page11">
  ...
</div>
<div data-role="page" id="page12">
 <h2 id="anchor12">Title: Page 12</h2>
 <script>myScript12() // inject complex content to #anchor12</script>
</div>

<强>1。我的 myScript12() 什么时候被触发？ (当我打开 .html 文件或单击并打开 #page12 时？

<强>2。当我离开 #page12 到另一个页面时，JS 生成的内容会怎样？

---

编辑:我不想在 .html 加载时加载所有 20 个繁重的页面。

---

解决方案: +1 detailed explanation by Gajotres (JQM: document ready vs page events) ，下面是我目前的解决方案。仅在显示给定的 data-role="page"时运行 js...

使用以下 JQM HTML/JS:

<div data-role="page" id="page12">
 <h2 id="anchor12">Title: Page 12</h2>
 <script>
$('#page12').on('pageinit') { //only run when page is displayed
     myScript12() // inject complex content to #anchor12
});</script>
</div>

Answer 1

1. 该脚本将在页面加载到 DOM 时立即执行。这就是页面事件存在的原因。基本上，如果您想为代码执行计时，请在页面事件中执行。如果您想了解更多关于页面事件的信息，请阅读我的其他答案: jQuery Mobile: document ready vs page events .

2. 当您离开页面时，内容仍会加载到 DOM 中。如果你想阻止大的 DOM 内容你可以使用 pagehide清除上一页内容的事件。还有一个属性可以放在 data-role="page"div 中以防止 DOM 变现。属性名称是 data-dom-cache="true"，您可以在它附近找到更多信息 here .