Question

我正在创建一个SPA应用程序。我必须为pageView和pageDetail设置不同的div。我将从SQlite数据库中检索数据并在pageView下的listview中显示。如果单击列表中的项目，则应加载pageDetail并在那里执行某些功能。目前，我可以从SQlite检索数据并在listview中显示。我也可以点击该项目，我使用警报测试。我尝试使用pagecontainer加载，但它没有工作。如何在单击项目时加载pageDetail，如何在加载pageDetail时运行函数？

HTML div- #pageView和#pageDetail

   <div data-role="page" id="pageView">
    <div data-role="header">

        <h2>View</h2>
        <button type="button" id="buttonView">View</button>
    </div>
    <!-- main -->
    <div data-role="main" class="ui-content">

        <ul id="listData" data-role="listview">
        </ul>

    </div>
    <!-- footer -->
    <div data-role="footer">
        <h2>myproject</h2>
    </div>
</div>

<div data-role="page" id="pageDetail">
    <div data-role="header">
        <a href="#pageView" class="ui-btn ui-icon-back">Back</a>
        <h2>Details</h2>

    </div>
    <!-- main -->
    <div data-role="main" class="ui-content">


    </div>
    <!-- footer -->
    <div data-role="footer">
        <h2>myproject</h2>
    </div>
</div>

的Javascript

$('#pageView').on('click', '#listData li', function(){
 var myeve = $(this).find('#selectedEve').text();
 $( ":mobile-pagecontainer" ).pagecontainer( "load", $('#pageDetail'), { 
 showLoadMsg: false } );

});

('#pageDetail').on("pageshow", function() {

//do some function here

});

Answer 1

如果您只需要重定向。

window.location.href = "http://YourSite.com/#PageDetail";

否则，您可以尝试在 display：none 加载时不显示PageDetail并执行 display：block onClick？

如果你想在点击项目后加载pageDetail，我建议你为它做一个ajax调用，返回请求的html，然后将它输出到你的容器中

我还不确定你要做什么，所以这只是一只野鹅..

单击列表中的项目时如何打开另一个<div>？

1 个答案: