1

我是 Jquery Mobile 的新手，我已经尝试了一切来解决这个问题。我有第一页是 index.php，这个页面从一个从 json 获取信息的 js 加载按钮。第二页（FichaTecnica.php）显示了该酒的信息（一切都是西班牙语，抱歉）。问题是我必须刷新浏览器中的页面才能加载信息，如果我回到第一页，我还必须刷新才能加载按钮。

任何帮助，将不胜感激。

谢谢。

索引.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;

}

4

3 回答 3

0

It would be better to have your pageinit code wired up before you bring in the page. Therefore, make sure you include the JS as part of your first page.

Wire up the paginit, like so:

$(document).on('pageinit', '#pagina2', function(e) {
    /* TODO: Page 2 init code */
});
于 2012-09-25T20:26:23.150 回答
0

您的初始页面未正确加载，因为您构建页面不正确（通过在其他元素加载后将 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 文件）。

于 2012-09-25T22:01:33.390 回答
0

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

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

于 2014-11-14T02:40:53.757 回答