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

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

本文关键字：返回 元素 当前页 同一个 为什么 jQuery 选择器 JQM      更新时间：2023-09-26

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

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

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

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

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

奥

马尔为我指出了正确的方向。可折叠构件仅在加载 JQM 页面时加载。解决方案是按照本 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>

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

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

相关文章：