Question

我的应用程序（单页布局）从服务器接收数据，我想要一个很好的基于按钮的导航，如：

<a data-role="button">Button X</a>
<a data-role="button">Button Y</a>

非常直接。当用户在程序中来回移动时，我想重用我的div，所以在使用$('#fancyDiv').empty()插入新按钮之前我会调用append() - 根据程序状态。

好的，但现在我们遇到了麻烦。只有在第一个呼叫按钮才能正确显示。当我向后移动时，选择另一个菜单项并刷新页面（调用empty()和append()）除了纯文本之外没有任何按钮。

最小化我的代码，似乎jQuery不喜欢附加HTML锚标签您可以在下面找到一些可在Web浏览器中打开的HTML代码。附加第二个文本时，您可以看到链接未着色但忽略并显示为常规文本。

我也尝试了导致相同结果的html()和text()方法，所以我很感激任何想法。

<html>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <body>
        <a data-role="button" onclick="$('#text').empty();">Empty paragraph</a>
        <a data-role="button" onclick="$('#text').append('wawon Park is a park that is located in Daegu Dalseong-gun, South Korea. The people who mainly use the park are children. It is marked to park, <a>1981 March 10.</a>')">Attach new Text</a>

        <p id="text">Hod Stuart (1879-1907) was a <a>Canadian professional</a> ice hockey cover-point (now known as a defenceman) who played nine seasons for several teams in different leagues. He also played briefly for the Ottawa Rough Riders football team</p>

        <h3>Reference Text</h3>
        <p>wawon Park is a park that is located in Daegu Dalseong-gun, South Korea. The people who mainly use the park are children. It is marked to park, <a>1981 March 10.</a></p>
    </body>
</html>

*编辑/更新 *

好的，Rory McCrossan提出了一个非常好的建议，即手动将ui-link类添加到anchor元素中。这在技术上解决了我的问题，但更进一步，出现了一个新的问题。我要注意是否要为此开一个新问题：

如上所述，我想使用按钮进行导航，只是添加ui-link类是不够的。我用萤火虫检查了this fiddle，似乎缺少某种启动方法。这是工作按钮的代码：

<a class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" data-role="button" data-theme="c">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">1981 March 10.</span>
</span>
</a>

在这里我们选择附加按钮：

<a class="ui-link" data-role="button">1981 March 10.</a>

好的，快速的和脏的我可以复制代码并设置我自己的所有跨度，但听起来......错误，并且一旦jQuery的结构发生一些变化就会中断。

Answer 1

您的代码运行正常。正在附加A标记，但它不会以任何方式进行样式设置。如果您将课程ui-link添加到A标记，则其显示与其他标记相同。我假设这个类是通过你包含的jquery-mobile脚本加载的。

有关示例，请参阅this fiddle。

注意，我还将每个按钮的处理代码移动到它自己的点击处理程序，为您提供更整洁的代码。

append（）文本包含链接时的jQuery问题

1 个答案: