为什么 jQTouch 不能立即用于我的 HTML？

Question

我是 jQTouch 的新手 - 它非常棒 - 但我发现我无法获得即使我遵循入门 指南以及标记指南。

具体来说，我的每个屏幕都是一个具有唯一 ID 的

元素（ 的直接子元素），并且我有指向这些 ID 的链接，例如。这似乎遵循演示代码的约定，但演示代码可以工作，而我的代码却不能。

这是我的 的 HTML 结构：

<section id="main-menu">
    <header class="toolbar"><!-- ... --></header>
    <nav>
        <ul>
            <li class="arrow"><a href="#screen-a">Screen A</a></li>
            <li class="arrow"><a href="#screen-b">Screen B</a></li>
            <li class="arrow"><a href="#screen-c">Screen C</a></li>
        </ul>
    </nav>
    <footer><!-- ... --></footer>
</section>

<section id="screen-a"><!-- ... --></section>
<section id="screen-b"><!-- ... --></section>
<section id="screen-c"><!-- ... --></section>

<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>

<script src="init.js"></script>

我的 init.js 只是初始化 jQTouch（无自定义选项）：

var jQT = new $.jQTouch({});

当我加载页面时，UI 显示正常，并且我可以确认 jQTouch 已初始化，因为我的 jQT 变量存在。

但是，当我单击任何链接时，位置栏会更改为新的哈希（例如“#screen-a”），但用户界面不会更改。 JavaScript 控制台开始重复抛出多个历史记录中没有页面错误。

（当我使用未缩小的 jQTouch.js 时，这些错误来自 jQTouch goBack() 函数内部，该函数是从 dumbLoopStart() 计时器调用的。）

请注意我在桌面 Safari 和 iPhone 上的移动 Safari 中都会发生这种情况。但这很奇怪，因为他们的 演示 对我来说都很好。

我已经用我的头撞了几个小时但无济于事。有人对我可能做错的事情有想法、建议或提示吗？谢谢！

Answer 1

我根据您提供的示例创建了一个测试（添加了样式导入）。只需删除

elements 为我解决了这个问题。

Answer 2

我相信你的主要元素必须是 div 的。此外，您需要在 div 上添加一个“当前”类，该类应首先显示。
我不知道你使用的版本是否需要这个，但是我不久前通过 git 拉取的内容要求所有主要元素都包含在 id 为“jqt”的 div 中。

<div id="jqt">
   <div id="main-menu" class="current">
       <ul>
           <li class="arrow"><a href="#screen-a">Screen A</a></li>
           <li class="arrow"><a href="#screen-b">Screen B</a></li>
           <li class="arrow"><a href="#screen-c">Screen C</a></li>
       </ul>
   </div>

   <div id="screen-a"><!-- ... --></div>
   <div id="screen-b"><!-- ... --></div>
   <div id="screen-c"><!-- ... --></div>
</div>

<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>