只有当我刷新页面时，jQuery移动js才能工作。
只有当我刷新页面时，jQuery移动js才能工作。
提问于 2012-09-25 12:08:00
我对Jquery还不熟悉，我已经尽了一切努力来解决这个问题。我有第一个页面，即index.php，这个页面从js加载按钮，从json获取信息。第二页(FichaTecnica.php)显示了该酒的信息(每一种都是西班牙语，对不起)。问题是，我必须在浏览器中刷新页面才能加载信息，如果返回到第一页，还必须刷新以加载按钮。
任何帮助都将不胜感激。
谢谢。
Index.php
<div data-role="page" id="main">
<div data-role="header">
<h1>
Page 1
</h1>
</div>
<div data-role="content">
<div>
<img src="images/Vinos separador [Negro].png" />
</div>
<div data-role="controlgroup" data-role="controlgroup" id="buttonGroup">
</div>
<div>
<img src="images/P Venta Separador [Negro].png" />
</div>
<div data-role="controlgroup" data-role="controlgroup" id="buttonGrouploc">
</div>
</div>
<div data-role="footer">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/variedadeslist.js"></script>加载第一页中按钮的Js文件
var url="http://localhost/CavaOnline/json_variedades.php";
var buttonHtmlString = "", pageHtmlString = "";
var jsonResults;
$.getJSON(url,function(data){
jsonResults = data.items;
displayResults();
});
function displayResults() {
for (i = 0; i < jsonResults.length; i++) {
buttonHtmlString += '<a data-transition="slide" href="FichaTecnica.php?id=' + jsonResults[i].id + '" id="'+ jsonResults[i].id +'" data-role="button">' + jsonResults[i].nombre + '</a>';
}
$("#buttonGroup").append(buttonHtmlString);
$("#buttonGroup a").button();
}第二页"FichaTecnica.php"
<div data-role="page" id="pagina2">
<div data-role="header">
<h1>
Header
</h1>
</div>
<div data-role="content">
<div>
<div data-role="collapsible" data-collapsed="false">
<h1>El Vino</h1>
<div id="descripcion">
</div>
</div>
<div data-role="collapsible" data-collapsed="false">
<h1>Cata</h1>
<div id="cata">
</div>
</div>
</div>
<a data-role="button" id="botonMarcas"></a>
</div>
<div data-role="footer">
<h1>
footer
</h1>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/descripcionlist.js"></script> 加载在第二页中的信息的Js
$('#pagina2').live('pageinit',function(event){
var id = getUrlVars()["id"];
$.getJSON('http://localhost/CavaOnline/json_variedades.php?id='+id, function(variedades) {
$.each(variedades, function(index, variedad) {
$('#descripcion').append('<p>'+variedad[id - 1].descripcion+'</p>');
$('#cata').append('<p>'+variedad[id - 1].cata+'</p>');
$('#botonMarcas').append().attr("href", 'FichaTecnica.php?id=' + variedad[id - 1].id);
});
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;}
回答 3
Stack Overflow用户
发布于 2012-09-25 12:26:23
在引入页面之前，最好先将页面代码连接起来。因此，请确保将JS作为第一页的一部分。
把页码连接起来，就像这样：
$(document).on('pageinit', '#pagina2', function(e) {
/* TODO: Page 2 init code */
});Stack Overflow用户
发布于 2012-09-25 14:01:33
您的初始页面没有正确加载，因为您构建的页面不正确(在加载其他元素之后将JS包含在底部)。因此，JavaScript只在页面刷新后才生效，因为此时JS已经存在于DOM中。
下面是基本的页面标记：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
</head>
<body>
...content goes here...
</body>
</html>此外，如果您包含任何将更改页面的自定义JS (如页面)，则应该在加载jQuery之后，但在加载jQuery移动之前加载JS文件(因此在头中插入两个JS文件之间)。
Stack Overflow用户
发布于 2014-11-13 18:40:53
我也遇到过类似的问题，只是通过在链接中添加数据-ajax=false来修复它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12590293
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
