jquery-mobile - 为什么 jquery mobile 不呈现我所有的 html 或加载 javascript？

Question

我有这个:

    <title>MyMobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<title>My Mobile</title>

<style type="text/css"> 
    table { width:100%; }
    table caption { text-align:left;  }
    table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
    table th, td { text-align:left; padding:6px;border: inset 1pt} 
</style> 

如果我手动转到页面，我的表格元素看起来很好。我可以看到边框等。如果我从另一个移动页面获取该页面，该页面加载正常，但表格 CSS 内容从未应用。没有样式。点击引用，设置样式。

这是怎么回事？

谢谢。

编辑:也没有加载我的 javascript。刷新。所有的工作再次。

edit:如果我点击后退按钮到另一个页面，它会做同样的事情。并非所有内容都加载。

Answer 1

只要你有 A 标签，默认情况下 JQM 使用 AJAX 加载这些页面 - 然后忽略除 div data-role=page 元素中包含的任何内容之外的所有内容。

您有 3 个选择:

1. 您可以告诉 JQM 始终禁用 AJAX(通过设置 ajaxEnabled to false)并像“普通浏览器”那样加载页面 - 这将重新加载所有 javascript 包含、样式表等...

2. 您可以在一个 .html 页面中包含所有不同的 div data-role=page，这样 JQM 在页面之间导航时不需要加载任何其他内容

3. 您仍然可以使用 AJAX 并加载外部文件，但是您需要将所有代码 (HTML/CSS/JS) 包含在 DIV 本身中。请注意，在这个选项中，您需要附加到不同的事件(pageinit/beforeshow/show/hide)而不是 $.ready(因为 JQM 将处理它并且 DOMContentReady 实际上不会触发。

您可以在 documentation 中阅读所有相关信息

希望这有助于...