JQueryMobile:当data-role="page"'s JS生成的内容被创建/删除

JQueryMobile: When data-role="page" 's JS generated content is created/remove?

本文关键字：quot 删除 创建 data-role page JQueryMobile JS      更新时间：2023-09-26

给定一个一个html多页应用程序，在我的每个页面中，我计划JS注入长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生成的内容会发生什么?

编辑:我不想把我所有的20个重页面加载到。html加载。

解决方案: +1是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>

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

  2. 当你离开你的页面，内容仍然在那里加载到 DOM 。如果你想防止大的 DOM 内容，你可以使用pagehide事件来清除以前的页面内容。还有一个属性可以放在data-role="page"div中，以防止 DOM 兑现。属性名是 data-dom-cache="true" ，你可以在这里找到更多关于它的信息

相关文章：