JQuery Mobile - 关闭对话框后加载错误的页面,并且Javascript并不总是有效
JQuery Mobile - Loads wrong page after closing dialog and Javascript not always working
我有一个项目,有两个html页面(bmi.html和7min.html(和一些javascript...我使用页脚在页面之间导航。
- 第一个问题:第一次运行 7 分钟.html,导航到 BMI.html使用页脚和 BMI 中的 JavaScript 不起作用!
- 第二个问题:第一次运行BMI.html,导航到7分钟.html然后再次回到BMI。Javascript工作正常,但关闭后弹出对话框返回到7分钟页面。
下面是我的代码。
7分钟:http://jsfiddle.net/Rwf5G/BMI: http://jsfiddle.net/snKyK/
<html>
<head>
<meta charset="utf-8">
<title>Body Trainer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"></script>
</head>
<body>
<div data-role="page" id="7min-page" class="type-interior" >
<div data-role="header" data-position="fixed" data-id="appHeader" >
<h1>Workout</h1>
</div><!-- /header -->
<div data-role="content" >
<h4>Brief</h4>
<p>
Some bla bla...
</p>
</div>
<div data-role="footer" data-id="appFooter" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<a href="bmi.html" data-prefetch="true">BMI</a>
</li>
<li>
<a href="7min.html" data-prefetch="true" class="ui-btn-active ui-state-persist">7min</a>
</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
(很抱歉我使用 jsfiddle,我在这里添加代码时遇到了一些问题。
-
第一期:
jQuery Mobile使用Ajax导航系统来加载页面和更改视图/页面。当您开始使用 bmi.html 时,将加载所有 HTML 标记。当你从bmi.html导航到7min.html时,jQuery Mobile只加载
<div data-role="page"></div>
和里面的内容。它忽略了div 之外data-role=page
其他 HTML 标记。- 解决方案:将JS代码放在
<div data-role="page"></div>
中。 - 选项:要在不使用 AJAX 的情况下导航,请将
rel="external"
或data-ajax="false"
添加到定位标记。这样做,将正常加载页面,但是,您将失去页面过渡效果。
- 解决方案:将JS代码放在
-
第二个问题:
将此属性
data-history="false"
添加到div<div data-role="popup">
。
相关文章:
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- Javascript中的正则表达式,用于只有数字的字符串,并且不应在除数字以外的任何位置包含任何字符
- JavaScript-仅验证数值并且在范围内
- 在javascript中,我正在使用EventListener,并且我得到了TypeError xyz = null
- 迭代 JSON 文件并且未在 Javascript 中正确返回结果
- JavaScript / jquery:如果选择了单选按钮并且数据属性符合条件,则添加类
- 删除当前<tr>并且还删除<tr>在使用纯javascript之前
- 无法让我的“hello world”YUI asyncRequest javascript 运行,并且由于某种原因,我无
- 如何修改此javascript使其'll删除两者<b>并且<i>标签
- 提交之间的差异=“;return false”;并且onsubmit=“;javascript:return false
- <=的周长并且>=在Javascript中.如何避免它们
- 当Safari正在运行并且没有窗口时,我如何通过JavaScript Automation打开Safari的新窗口
- 选中了 Javascript 计数复选框,并且不计算另一个复选框
- 如何查找是否所有 ajax 请求都已完成,并且每个请求都使用 Javascript 和/或 JQuery 将数据从服务器
- Javascript 字符串验证.如何在字符串中只写一次字符,并且只在开头写一次
- Google dart是否生产ES5友好的javascript,并且今天是否包括或排除IE8
- 如何更新 cookie 值(并且不更改到期日期)?JavaScript
- 如何检查菜单链接或选项卡是否已被单击,并且用户是否在Javascript的链接/页面上
- 使用JavaScript并且在条件语句方面有困难
- 创建文本和图像列表的最佳方法是什么,使用 JavaScript 并且几乎没有 HTML