javascript - jQueryMobile : 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 .