Question

我正在将jquery移动面板应用到我的网站中。一切正常，直到我决定两次访问同一页面，然后面板图标（data-icon =“bars”）不会打开面板。它没有回应。它在我手动重新加载页面时有效。我相信它与缓存或ajax有关:-(请帮助。回顾：1。我点击面板图标＆amp;它打开侧面板。我从page_a转到page_b。接下来，我回到page_a和（ data-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 -->

jQuery Mobile Panels错误

1 个答案: