javascript - jquery "listview"和图表

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

我在将图表(jquery 图表)显示到网络时遇到了一些麻烦。

我有两个页面(1.html 和 2.html)。第一个包含与第二页链接的 ListView 。 2.html 显示图表。问题是:当通过第 1 页启动第 2 页时,图表没有出现!!但是如果我重新加载页面 2.. 那么图表就会出现!

如果我只处理一个使用“href=#page”引用的页面,图表可以正常工作并显示出来,但我的意图是使用不同的 html 文件,其中一个带有 ListView ,另一个带有图表。是否可以?

我测试了多种类型的 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)

最佳答案

要了解这种情况,您需要了解 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 .

关于javascript - jquery "listview"和图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16667920/

相关文章:

javascript - 如何使用 jQuery 或 C# 获取 iframe 的内容?

jquery - 如何删除 Jquery Mobile Panel 表单的填充?

jquery - 使用 JQuery 禁用 JQuery Mobile 按钮

javascript - JQuery Mobile CSS 文本输入

javascript - Android 默认浏览器 : Google Maps makes "position: relative" elements scroll over the top of the page

javascript - 单元测试没有通过,尽管它显然应该通过?

javascript - Chart JS 图例样式

jquery - 我如何使用 karma/jasmine 对这个简单的 jQuery 代码进行单元测试?

javascript - 如何不允许生成错误元素

javascript - 使用 jQuery 从 Web API 检索数据数组