Javascript jQuery Mobile js仅在我刷新页面时工作_Javascript_Json_Jquery Mobile

Javascript jQuery Mobile js仅在我刷新页面时工作

javascript json jquery-mobile

Javascript jQuery Mobile js仅在我刷新页面时工作,javascript,json,jquery-mobile,Javascript,Json,Jquery Mobile,我是Jquery Mobile的新手，我已经尝试了所有方法来解决这个问题。我有第一个页面是index.php，这个页面从js加载按钮，js从json获取信息。第二个页面FichaTecnica.php显示了该葡萄酒的所有信息都是西班牙语的，对不起。问题是，我必须刷新浏览器中的页面以加载信息，如果我返回到第一个页面，我还必须刷新以加载按钮任何帮助都将不胜感激谢谢 Index.php 加载第一页中的按钮的Js文件第二页FichaTecnica.php 在第二页中加载信息的Js }最好在输入页

我是Jquery Mobile的新手，我已经尝试了所有方法来解决这个问题。我有第一个页面是index.php，这个页面从js加载按钮，js从json获取信息。第二个页面FichaTecnica.php显示了该葡萄酒的所有信息都是西班牙语的，对不起。问题是，我必须刷新浏览器中的页面以加载信息，如果我返回到第一个页面，我还必须刷新以加载按钮

任何帮助都将不胜感激

谢谢

Index.php

加载第一页中的按钮的Js文件

第二页FichaTecnica.php

在第二页中加载信息的Js

}

最好在输入页面之前将pageinit代码连接好。因此，请确保将JS作为第一页的一部分

连接paginit，如下所示：

$(document).on('pageinit', '#pagina2', function(e) {
    /* TODO: Page 2 init code */
});

您的初始页面没有正确加载，因为在加载其他元素后，您在底部包含了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，这些JS会像您的pageint一样改变页面，那么它们应该在加载jQuery之后加载，但在加载jQuery Mobile之前，在两者之间的头部插入JS文件。

我遇到过类似的问题，只是通过在链接中添加数据ajax=false来修复它们

ref:

在调用上述所有操作之前，您是否在等待DOM加载？我看不到呼叫。就绪…啊，但在jQuery mobile中您使用-你的第二个JS片段；加载页面时是否加载了此文件？如果是这样，您的pageinit可能无法及时附加。如果在页面上加载，则选择器“pagina2”无效。我将提前加载此脚本并将init事件附加到文档中。谢谢！。我已经试过了，我仍然需要刷新两个页面，才能在第一个页面中加载按钮，在第二个页面中加载可折叠文件中的信息。

    <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>

$('#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;

$(document).on('pageinit', '#pagina2', function(e) {
    /* TODO: Page 2 init code */
});

<!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>