Question

我创建了一个模板 authorPageTemplate ，这是一个id author + id 的页面，点击厨房上的图像我想要使用模板附加作者页面。

页面模板功能

var authorPageTemplate = function(id){
var authorPage = '<div data-role="page" id="author' + id +'">';
    authorPage += '<div id="content-pane'></div>;
    authorPage += '</div>';
    return authorPage;
}


$("#page5").on("pageshow", function(event){
    $("#gallery a").on("tap", function(){
    idNum = $(this).attr("id");
    setID(idNum);
    $("#container").append(authorPageTemplate(getID()));
    $.mobile.changePage("#author" + getID(), {
        transistion : "slidefade"
    });
});
});

现在我还添加了另一个代码来更新创建的作者页面的内容窗格

$("#author" + getID()).on("pageshow", function(event){
    $("#author" + getID() + " #content-pane").html(updateHtml(getID()));
});

问题： 1.未创建作者页面。

Answer 1

这是 DEMO

您的模板代码在id =“content-plane”和结尾/ div附近的单引号和双引号上存在一些问题。它应该如下所示：

function authorPageTemplate(id){
    var authorPage = '<div data-role="page" id="author' + id +'">';
    authorPage += '<div id="content-pane"></div>';
    authorPage += '</div>';
    return authorPage;
}

然后在你的页面显示中，使用$（document）.on（“pageshow”，“＃author”+“num1”，function（event）{... 它允许处理程序在创建页面之前存在。处理程序将从文档委派给动态页面。

$(document).on("pageshow", "#page5", function(){
    $("#gallery a").on("click", function(){
        $("body").append(authorPageTemplate('num1'));
        $.mobile.changePage("#author" + "num1", {
            transistion : "slidefade"
        });
    });

    $(document).on("pageshow", "#author" +"num1", function(event){
        $("#author" + "num1" + " #content-pane").html('I am a dynamic page');
    });
});

在jquery mobile中将页面附加到id

1 个答案: