Javascript JQM：为什么同一个jQuery选择器根据当前页面返回不同数量的元素？

首次打开（或刷新）我的应用程序时，主页为当前页面，然后从控制台执行以下命令：

$("a.ui-collapsible-heading-toggle").length

返回值为1。总共有4个可折叠的小部件，但主页上只有1个。如果单击Documentation选项卡并执行相同的命令，它将返回正确的数字4-此页面上有3个小部件。如果单击主页选项卡（或任何其他选项卡），将显示正确的结果4

我使用的是JQM版本1.4.5和jQuery 2.1.3

---

有人能解释这种不一致的行为吗？

奥马尔给我指出了正确的方向。可折叠小部件仅在加载JQM页面时加载。解决方案是按本节所述对页面进行数据预取。请注意，data prefeth属性可以应用于单页和多页选项

因为我的应用程序只有四个页面中的两个。包含可折叠的小部件，我只需要在这些页面的链接上指定“数据预取”

在主页上，指定数据预取的导航栏链接如下：

<div data-role="navbar">
    <ul>
        <li><a href="#home" data-prefetch class="ui-btn ui-state-persist ui-icon-home" data-icon="home">Home</a></li>
        <li><a href="#demo" class="ui-btn ui-icon-info" data-icon="info">Examples</a></li>
        <li><a href="#documentation" data-prefetch class="ui-btn ui-icon-info" data-icon="info">Documentation</a></li>
        <li><a href="#contact" class="ui-btn ui-icon-mail" data-icon="mail">Contact</a></li>
        </ul>
    </div>
</div>

请注意#主页和#文档链接上的data=prefetch属性

---

这些数据预取属性的组合产生了正确数量的选定元素，4。

点击文档，DOM被更新。有没有办法不点击选项卡就更新DOM？对于否决此问题的人，请解释您的原因。仔细检查后，Rayon，我发现，单击任何不包含任何可折叠文件的其他选项卡时，也会显示长度为1。可折叠文件是在第一次访问页面时创建的。在家里你有一个，所以你有一个。当您导航到下一个包含3个可折叠文件的页面时，会得到4个，因为这两个页面都在DOM中。