动态内容的jquery移动样式和脚本不适用于重新访问页面。

Question

新的jquery手机。试图构建我的第一个jquery移动应用程序。应用程序的要求是一些页面的左和右面板。有很多动态数据，如页面标题、左面板列表(其中包含图像和通过JSON对象的标题)，拥有所有页面链接的右面板也将动态出现。一开始一切都很好，但当我们重新访问第1页时，访问了第2页之后，面板出现了混乱。页标题不更新。重新访问页面似乎没有捕捉到写在js和css文件上的样式和函数。这是演示。HTML https://jsfiddle.net/brunocoder/x5j0jqgt/3/

<div data-role="page" id="page-1"  data-title="Page 1" class="header-default footer-default ">
    <div data-role="panel" id="page-1-panel-left" data-dismissible="false" class="panel-left" data-display="overlay" data-theme="a" data-position-fixed="true" data-swipe-close="true" data-position="left">
    </div><!--end panel-->
    <div data-role="panel" id="page-1-panel-right" class="ui-panel-content-wrap-position-right panel-right" data-display="overlay" data-position="right">
        <ul data-role="listview" class="panel-right-listview">
            <li data-icon="delete"><a href="#page-1" data-rel="close" class="panel-header">Close</a></li>
            <div class="app-page-list"></div><!--dynamic list of pages-->
        </ul>
    </div><!--end panel right-->
    <div data-role="header" data-position="fixed" data-fullscreen="false">
        <a href="#page-1-panel-left" class="ui-btn ui-icon-bars ui-btn-icon-left ui-shadow ui-corner-all ui-btn-icon-notext"></a>

        <a href="#page-1-panel-right" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-notext ui-icon-gear" data-rel="popup" data-position-to="window"></a>
    </div>
    <!--end header-->
    <div data-role="main" class="">
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 1<br/>Div 1
        <br/> Click on right panel</div><!--end chart box-->
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 1<br/>Div 2</div><!--end chart box-->
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 1<br/>Div 3</div><!--end chart box-->
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 1<br/>Div 4</div><!--end chart box-->

    </div><!--main ends here-->

</div><!--end page-1 page-->

<div data-role="page" id="page-2"  data-title="Page 2" class="header-default footer-default">
    <div data-role="panel" id="page-2-panel-left" class="panel-left" data-display="overlay" data-theme="a" data-position-fixed="true" data-swipe-close="true" data-position="left">
    </div>
    <!--end panel-->
    <div data-role="panel" id="page-2-panel-right" class="ui-panel-content-wrap-position-right panel-right" data-display="overlay" data-position="right">
        <ul data-role="listview" class="panel-right-listview">
            <li data-icon="delete"><a href="#page-1" data-rel="close" class="panel-header">Close</a></li>
            <div class="app-page-list"></div><!--dynamic list of pages-->
        </ul>
    </div>
    <!--end panel right-->
    <div data-role="header" data-position="fixed" data-fullscreen="false">
        <a href="#page-2-panel-left" class="ui-btn ui-icon-bars ui-btn-icon-left ui-shadow ui-corner-all ui-btn-icon-notext"></a>

        <a href="#page-2-panel-right" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-icon-notext ui-icon-gear" data-rel="popup" data-position-to="window"></a>
    </div>
    <!--end header-->
    <div data-role="main">
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 2<br/>Div 1<br/>click right panel to go on Page 1.</div><!--end chart box-->
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 2<br/>Div 2</div><!--end chart box-->
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 2<br/>Div 3</div><!--end chart box-->
        <div class="ui-body ui-body-a ui-corner-all page-box">This is page 2<br/>Div 4</div><!--end chart box-->

    </div><!--main ends here-->
</div>
<!--page ends here-->

用于动态头的JS /下面代码

$(document).on("pagecreate", "[data-role='page']", function(){
    if($($(this)).hasClass("header-default")){
        $('<div data-role="header"  data-position="fixed" data-fullscreen="false"><h1>'+ '' +'</h1></div>')
        .prependTo( $(this) )
        .toolbar({position: "fixed"});
        $("[data-role='header'] h1").text($(this).jqmData("title"));
    } //header default

    if ($($(this)).hasClass("footer-default")){
        $('<div data-role="footer" data-position="fixed" data-fullscreen="false"></div>')
        .appendTo($(this))
        .toolbar({position: "fixed"});
    }
});// show page
// dyynamic footer

// code for dynamic page list
$(document).on("pagebeforecreate", "[data-role='page']", function(){
    //This code creates dynamic list of dashboards
    var PageList = '<li><a href="#page-1" class="ui-btn ">page 1</a></li>';
    PageList += '<li><a href="#page-2" class="ui-btn ">page 2</a></li>';
    $(".app-page-list").html(PageList);

});


// dynamic panel list page-1
$(document).on("pagebeforecreate", "[data-role='page']", function(){
    var ChartData = {
        results: [
            {
                chart_id: "box-1",
                chart_image: "images/panel-chart-1.jpg",
                chart_title: "chart 1"
            },
            {
                chart_id: "box-2",
                chart_image: "images/panel-chart-2.jpg",
                chart_title: "chart 2"
            },
            {
                chart_id: "box-3",
                chart_image: "images/panel-chart-3.jpg",
                chart_title: "chart 3"
            },
            {
                chart_id: "box-4",
                chart_image: "images/panel-chart-1.jpg",
                chart_title: "chart 4"
            },
            {
                chart_id: "box-5",
                chart_image: "images/panel-chart-2.jpg",
                chart_title: "chart 5"
            },
            {
                chart_id: "box-6",
                chart_image: "images/panel-chart-3.jpg",
                chart_title: "chart 6"
            }
        ]
    };
    var panel_list = '<ul data-role="listview" id="" data-inset="true" class="app-panel" >';
    panel_list +='<li data-icon="delete"><a href="#" data-rel="close" class="panel-header ui-btn ui-btn-icon-left ui-icon-delete"> Close</a></li>';

    var res = ChartData.results;
    for (var key in res)
    {
        panel_list += '<li data-icon="false">';
        panel_list += '<a data-transition="slide" href=#'+ res[key].chart_id +'>';
        panel_list += '<img class="orange-border" src="'+res[key].chart_image+'">';
        panel_list += '<p>'+ res[key].chart_title +'</p>';
        panel_list += '</a></li>';
        // console.info(res[key].chart_title);
    }
    panel_list += '</ul>';
    $("#page-1-panel-left").html(panel_list);
});

// dynamic panel list page-2
$(document).on("pagebeforecreate", "[data-role='page']", function(){
    var page_2_ChartData = {
        results: [
            {
                chart_id: "box-7",
                chart_image: "images/panel-chart-3.jpg",
                chart_title: "chart 1"
            },
            {
                chart_id: "box-8",
                chart_image: "images/panel-chart-1.jpg",
                chart_title: "chart 2"
            },
            {
                chart_id: "box-9",
                chart_image: "images/panel-chart-2.jpg",
                chart_title: "chart 3"
            },
            {
                chart_id: "box-10",
                chart_image: "images/panel-chart-3.jpg",
                chart_title: "chart 4"
            }
        ]
    };
    var page_2_panel_list = '<ul data-role="listview" id="" data-inset="true" class="app-panel" >';
    page_2_panel_list +='<li data-icon="delete"><a href="#" data-rel="close" class="panel-header ui-btn ui-btn-icon-left ui-icon-delete"> Close</a></li>';

    var page_2_res = page_2_ChartData.results;
    for (var key in page_2_res)
    {
        page_2_panel_list += '<li data-icon="false">';
        page_2_panel_list += '<a data-transition="slide" href=#'+ page_2_res[key].chart_id +'>';
        page_2_panel_list += '<img class="orange-border" src="'+page_2_res[key].chart_image+'">';
        page_2_panel_list += '<p>'+ page_2_res[key].chart_title +'</p>';
        page_2_panel_list += '</a></li>';
        // console.info(res[key].chart_title);
    }
    page_2_panel_list += '</ul>';
    $("#page-2-panel-left").html(page_2_panel_list);
});

CSS

 .page-box{
        width:90%;
        height: 200px;
        margin: 10px auto;
        background-color: #ccc;
        font-weight: bold;
    }
    .panel-header{
        min-height: 1.3em !important;
        background-color: #4eb1ba !important;
        color: #ffffff !important;
        font-size: 1em;
        margin-top: 1em !important;
    }
    .ui-panel-inner>.ui-listview-inset{
        margin: -1em;
    }
    .orange-border{
        border-radius: 8px;
        border: 2px solid #FBD073 !important;
        padding: 5px;
    }
    .panel-right.ui-panel{
        width: 12em;
        padding-left: 0px;
    }
    .panel-left.ui-panel{
        width: 8em;
    }    
    .ui-panel-inner{
        padding: 0 !important;
    }
    .app-panel>li>a>img{
        position: relative !important;
        clear: both;
        background-color: #999999;
        height: 90px;
        width: 90px;
    }
    .app-panel>.ui-li-has-thumb>.ui-btn, .ui-.app-panel>.ui-li-static.ui-li-has-thumb{
        padding: 1.7em !important;
        background-color: #ffffff !important;

    }
    .panel-right-listview{
        margin: -1em 0em 0em 0em !important;
    }

提前感谢

Answer 1

在您的页面中，您正在呼叫：

$("[data-role='header'] h1").text($(this).jqmData("title"));

这会将文本写入DOM中的所有头H1，因此当您访问第2页时，它也将覆盖第1页上的标题。将行更改为：

$(this).find("[data-role='header'] h1").text($(this).jqmData("title"));

这确保您只更新正在创建的页面中的标头。

对于面板，因为每个页面都有单独的处理程序，所以将处理程序更改为

$(document).on("pagebeforecreate", "#page-1", function(){ ...

和

$(document).on("pagebeforecreate", "#page-2", function(){ ...

这确保它们只对即将创建的页面运行一次。

更新的小提琴