jquery“listview”和图表答案

【问题标题】：jquery "listview" and chartsjquery“listview”和图表
【发布时间】：2013-05-21 10:35:48
【问题描述】：

我在将图表（jquery Charts）显示到网络时遇到了一些麻烦。

我有两个页面（1.html 和 2.html）。第一个包含与第二页链接的列表视图。 2.html 显示图表。问题是：当第2页通过第1页启动时，图表没有出现！！但是如果我重新加载页面 2.. 那么图表就会出现！

如果我使用“href=#page”引用的唯一页面，图表可以正常工作并显示，但我的意图是拥有不同的 html 文件，其中一个带有列表视图，另一个带有图表。可能吗？

我已经测试了许多类型的 jquery 图表，它们都有相同的行为。

有什么想法吗？

谢谢大家，最好的问候。

这里是文件：

1.html ----

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
    <div data-demo-html="true">
        <ul data-role="listview" data-inset="true">
            <li><a href="2.html">Chart</a></li>
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">/script>
</body>

2.html将代码放入参考（jqwidgets - chart_bar）

【问题讨论】：

1.html 包含：code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

标签： javascript jquery jquery-mobile charts jquery-mobile-listview

【解决方案1】：

要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用 ajax 加载其他页面。

首页正常加载。它的 HEAD 和 BODY 被加载到 DOM 中，它们在那里等待其他内容。加载第二个页面时，仅将其 BODY 内容加载到 DOM 中。

最现实的解决方案是将您的所有 javascript 移动到原始的第一个 HTML 中。收集所有内容并将其放入单个 js 文件中，放入 HEAD。在加载 jQuery Mobile 后初始化它。我也会使用相同的 index.js 文件并在每个可能的其他页面的 HEAD 中对其进行初始化。

现在你可以问我为什么了？

像 jQuery Mobile 这样的Phonegap 是有缺陷的，如果您的每个 js 内容都在一个 HTML 文件中，迟早会出现错误并且您的应用程序将失败（包括加载的 DOM）。 DOM 可能会被删除，Phonegap 会刷新您当前的页面。如果该页面没有javascript，则在重新启动之前它将无法工作。

我在这里的回答中列出了解决此问题的其他方法（带有示例）：Why I have to put all the script to index.html in jquery mobile。

【讨论】：

嗨 Gajotres，非常感谢您对 jquery-mobile 使用的快速响应和信息。为了实现类似于“解决方案 2”的解决方案，我尝试仅使用一个 html，所有 js 文件都放入 HEAD。除此之外，我将所有页面放入同一个 html 文件中（使用引用 href="#page2" 来访问每个页面）。在这种情况下，图表的页面可以正常工作，但出现了另一个问题！现在问题与“listview”对象有关。我将编辑我的问题以扩展问题。谢谢
一个关于jquery-mobile和listview对象的新问题：stackoverflow.com/questions/16676948/…