javascript - jQuery Mobile js 仅在刷新页面时才起作用

Question

我是 Jquery Mobile 的新手，我已经尝试了一切方法来解决这个问题。我的第一个页面是index.php，该页面从js 加载按钮，该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;

}

Answer 1

最好在引入页面之前先连接好 pageinit 代码。因此，请确保将 JS 包含在首页中。

连接 paginit，如下所示:

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