javascript - JQM : Why does the same jQuery selector return a different number of elements depending on the current page?

Question

当第一次打开(或刷新)我的应用程序时，主页是当前页面，然后从控制台执行以下命令:

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

返回值为1，总共有4个可折叠的widgets，但是首页只有1个。如果我随后单击文档选项卡并执行相同的命令，它会返回正确的数字 4 - 此页面上有 3 个小部件。如果我随后单击“主页”选项卡(或任何其他选项卡)，则会显示正确的结果 4。

我正在使用 JQM 版本 1.4.5 和 jQuery 2.1.3。

谁能解释这种不一致的行为？

Answer 1

Omar 为我指明了正确的方向。可折叠小部件仅在加载 JQM 页面时加载。解决方案是按照此 JQM document 中的指示预取数据页面.请注意，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>

请注意#home 和#docmentation 链接上的 data=prefetch 属性。

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