jQuery 移动面板错误

Question

我正在我的网站中实现 jquery 移动面板。一切正常，直到我决定访问同一页面两次，然后面板图标 (data-icon="bars") 不会打开面板。它不响应。当我手动重新加载页面时它可以工作。我相信它与缓存或ajax有关:-(请帮忙。回顾一下：1.我点击面板图标并打开侧面板。我从page_a转到page_b。接下来，我回到page_a和（数据-icon="bars") 不再响应。我需要手动重新加载页面才能正常工作。请问如何解决？谢谢

下面你可以看到我的代码：

<!-- Start of page_a page -->
    <div data-role="page" id="page_a">
        <div data-role="header" data-position="inline">
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext"></a>
        </div><!-- /header -->
        </div><!-- /content -->
        <div data-role="panel" data-display="push" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
                <li><a href="#page_a">A</a></li>
                <li><a href="#page_b">B</a></li>
                <li><a href="#page_c">C</a></li>
        </ul>
    </div><!-- /panel -->
    </div><!-- /page_a end -->

    <!-- Start of page_b page -->
    <div data-role="page" id="page_b">
        <div data-role="header" data-position="inline">
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext"></a>
        </div><!-- /header -->
        </div><!-- /content -->
        <div data-role="panel" data-display="push" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
                <li><a href="#page_a">A</a></li>
                <li><a href="#page_b">B</a></li>
                <li><a href="#page_c">C</a></li>
        </ul>
    </div><!-- /panel -->
    </div><!-- /page_b end -->

Answer 1

问题是您对所有面板使用相同的 id。 jQM 通过 ajax 将页面加载到现有的 DOM 中，因此您的所有面板最终都位于同一个 DOM 中，并且当多个面板具有相同的 ID 时，jQM 不再知道要打开哪个面板。

您更新了FIDDLE

<div data-role="page" id="page_a">
    <div data-role="header" data-position="inline">
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div><!-- /header -->
    <div data-role="content"><p>This is page_a.</p>
    </div><!-- /content -->
    <div data-role="panel" data-display="push" id="nav-panel">
    <ul data-role="listview">
        <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
            <li><a href="#page_a">A</a></li>
            <li><a href="#page_b">B</a></li>
            <li><a href="#page_c">C</a></li>
    </ul>
</div><!-- /panel -->
</div><!-- /page_a end -->

<!-- Start of page_b page -->
<div data-role="page" id="page_b">
    <div data-role="header" data-position="inline">
    <a href="#nav-panel2" data-icon="bars" data-iconpos="notext"></a>
    </div><!-- /header -->
   <div data-role="content"><p>This is page_b.</p>
    </div><!-- /content -->
    <div data-role="panel" data-display="push" id="nav-panel2">
    <ul data-role="listview">
        <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
            <li><a href="#page_a">A</a></li>
            <li><a href="#page_b">B</a></li>
            <li><a href="#page_c">C</a></li>
    </ul>
</div><!-- /panel -->
</div><!-- /page_b end -->

    <!-- Start of page_c page -->
<div data-role="page" id="page_c">
    <div data-role="header" data-position="inline">
    <a href="#nav-panel3" data-icon="bars" data-iconpos="notext"></a>
    </div><!-- /header -->
    <div data-role="content"><p>This is page_c.</p>
    </div><!-- /content -->
    <div data-role="panel" data-display="push" id="nav-panel3">
    <ul data-role="listview">
        <li data-icon="delete"><a href="#" data-rel="close">Close Menu</a></li>
            <li><a href="#page_a">A</a></li>
            <li><a href="#page_b">B</a></li>
            <li><a href="#page_c">C</a></li>
    </ul>
</div><!-- /panel -->
</div><!-- /page_c end -->