Jquery mobile jquerymobile和AJAX

在我看来，我没有完全理解jquerymobile背后的概念，因为我不知道如何解决这个问题

我想做的是根据location.hash，通过AJAX加载一些HTML内容，将其放入一个新页面并加载此页面

但是如果我使用

pagebeforechange

事件自己创建一个页面，jquerymobile就会忽略它，创建自己的div，我的内容就不会显示

我该怎么做？ 编辑： 这就是我目前正在做的，但它不起作用

$(function() {

    getPageContent(top.location.href, false);

    $(document).bind( "pagebeforechange", function( e, data ) {

            getPageContent(data.toPage, true);
    });


});



function getPageContent(pageUrl, changedPage) {

    var re = /.*\/#(.*)/;
    var result;


    result = re.exec(pageUrl);


    window.page = result[1].substr(0,3);
    window.id = result[1].substr(3);



    window.ajaxUrl = "request.php?page="+window.page+"&id="+window.id;

    $.ajax({

        url: window.ajaxUrl,

        success: function(data) {

            if(data.error) {
                alert(data.error);
            }
            else if(data.data) {
                if(changedPage) {
                    changePage(data.data));
                }
                else {
                    $('#content[role="main"]').html(atob(data.data));
                    setupPage();
                }

            }
            else {
                alert("UNKNOWN ERROR: "+data);
            }       
        }

    });

}

function changePage(html) {


    var div = "<div></div>";

    var newPage = $(div).attr("data-role", "page").attr("data-url", window.page+window.id);

    var header = $(div).attr("data-role", "header");
    var content = $(div).attr("data-role", "content");
    var footer = $(div).attr("data-role", "footer");

    $("body").append(newPage);
    newPage.append(header, content, footer);

    content.html(html);

    newPage.page();
}

$（函数（）{
getPageContent（top.location.href，false）；
$（文档）.bind（“pagebeforechange”，函数（e，数据）{
getPageContent（data.toPage，true）；
});
});
函数getPageContent（pageUrl，changedPage）{
变量re=/.\/#（.*）/；
var结果；
结果=re.exec（pageUrl）；
window.page=result[1]。substr（0,3）；
window.id=result[1]。substr（3）；
window.ajaxUrl=“request.php？page=“+window.page+”&id=“+window.id；
$.ajax({
url:window.ajaxUrl，
成功：功能（数据）{
if（data.error）{
警报（数据错误）；
}
else if（data.data）{
如果（更改页面）{
changePage（data.data））；
}
否则{
$（'#content[role=“main”]'）.html（atob（data.data））；
setupPage（）；
}
}
否则{
警报（“未知错误：+数据”）；
}       
}
});
}
函数更改页（html）{
var div=“”；
var newPage=$（div.attr（“数据角色”、“页面”）.attr（“数据url”，window.page+window.id）；
var header=$（div.attr（“数据角色”、“头”）；
var content=$（div.attr（“数据角色”、“内容”）；
var footer=$（div.attr（“数据角色”、“页脚”）；
$（“正文”）。追加（新页）；
追加（页眉、内容、页脚）；
html（html）；
page（）；
}

您必须使用jQueryMobile刷新页面：

 $("#your-page").trigger("create");

--编辑

$（“#页面”）.live（“页面显示”，函数（）{
$（“#页面）.trigger（“创建”）；
});

---

更改“pageshow”事件前页面的内容

完成整个答案的编辑：

首先，将您的主体id设置为

id=body

。然后，当您想加载新页面并对其进行更改时，请使用如下ajax调用：

$.get(window.ajaxUrl, function(data){
    $('#body').append("<div id='newPage' data-role='page'></div>"); //Creates a new page.
    $('#newPage').html(data); //Loads the html content into the new page.
    $.mobile.changePage('#newPage'); //Navigates to the new page.
}

$.get（window.ajaxUrl，函数（数据）{
$（'#body'）。追加（“”；//创建一个新页面。
$（'#newPage'）.html（数据）；//将html内容加载到新页面中。
$.mobile.changePage（“#newPage”）；//导航到新页面。
}

这将发送一个ajax调用，方法是GET to the url，该url位于

窗口中。ajaxUrl

。如果调用成功，它将创建一个名为“newPage”的新页面，并用从ajax调用接收的数据填充该页面。然后重定向到新创建的页面

---

这显示了它的基本工作原理。但是，它不使用任何ajax调用。

它会自动为您执行此操作-只需定期链接到页面，jquery mobile将打开加载微调器，通过ajax在后台加载，然后转换到新页面

确保所有页面都使用唯一的ID和数据role='page'确定。请查看此处的《开始指南》：

---

但是什么时候我必须调用它？在

pagebeforechange

事件中？我是否只需将

div

-元素添加到

正文中即可创建页面

？您是否可以提供更多的示例代码？您可以在加载和处理完加载的html内容后调用它。但是我应该在哪里加载html内容？我将发布我的own单独回答。@Finn LennartHeemeyer编辑过！好的，但这意味着我必须为我页面上的每个按钮创建一个onClick函数，难道没有办法使用jquery mobile的点击劫持自动达到这个目的吗？我完全重编了答案。但是，我不明白你在上面评论中的问题。如果你愿意的话使用$.mobile.changePage（“url”）加载现有页面；不，我希望页面上的所有链接都有这种行为。这就是我要寻找的。我通过捕获

pagebeforechange

事件实现了这一点，正如您在上面看到的，但它不起作用……您可以从每个按钮的onclick调用相同的函数，但参数不同。

$.get(window.ajaxUrl, function(data){
    $('#body').append("<div id='newPage' data-role='page'></div>"); //Creates a new page.
    $('#newPage').html(data); //Loads the html content into the new page.
    $.mobile.changePage('#newPage'); //Navigates to the new page.
}