Question

我是Jquery Mobile的新手，我已经尝试了一切来解决这个问题。我有第一页是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();   
    }

第二页＆＃34; FichaTecnica.php＆＃34;

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

}

Answer 1

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

连接paginit，如下所示：

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

Answer 2

您的初始页面未正确加载，因为您正在错误地构建页面（在其他元素加载后将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（比如你的pageint），它们应该在加载jQuery之后加载，但是在加载jQuery Mobile之前（所以在两个头文件之间插入JS文件））。

Answer 3

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

参考：http://api.jquerymobile.com/pagecontainer/

jQuery Mobile js只在刷新页面时才有效

3 个答案: