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

Question

我正在创建一个 SPA 应用程序。我必须为 pageView 和 pageDetail 设置不同的 div。我将从 SQlite 数据库中检索数据并显示在 pageView 下的列表视图中。如果单击列表中的一个项目，那么它应该加载 pageDetail 并在那里执行一些功能。目前，我可以从 SQlite 检索数据并在列表视图中显示。我还可以单击该项目，我使用警报进行了测试。我尝试使用 pagecontainer 加载，但它不起作用。点击item时如何加载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"; 

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

如果您想在单击项目后加载 pageDetail，我建议您对其进行 ajax 调用以返回请求的 html，然后将其输出到您的容器中

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