Uncaught TypeError: Cannot read property 'scrolltop' of undefined - Zurb Foundation and Jquery Mobile

Question

我有一个使用 Jquery Mobile 和 Zurb Foundation CSS 构建的应用程序。我在母版页的 header 中有一个通用菜单，在其他页面中有一个克隆副本。我使用 Foundation 的 Topbar 响应式菜单。

<div data-role="header" id="header-master" >

<div class="row" >

    <div class="small-3 medium-2 large-2 columns >

    </div>

    <div class="small-6 medium-2 large-2 columns " >

    </div>

    <div class="small-12 medium-8 large-8 columns ">
        <nav class="top-bar" data-topbar data-no-turbolink role="navigation" id="home-context-menu">
            <ul>
                <li></li>
            </ul>
        </nav>
    </div>

</div>

克隆的菜单是，

<div id="header-child">

 </div>

当我点击菜单时，它会展开并响应 click/tap 操作。再次执行相同操作会出现错误，指出 Uncaught TypeError: Cannot read 属性 'scrolltop' of undefined。控制台在 Foundation.min.js

中显示错误

我正在克隆

中的菜单

$(document).on("pagecreate", "#page-next", function ()

     {
         $("#header-master").clone().appendTo("#header-child");
    }
    return false;

 });

我还尝试在 pagebeforecreate 事件中克隆 header。

Answer 1

终于找到答案了。我需要在所有使用它的页面中初始化 Foundation 库。

 /*INITIALIZE FOUNDATION CSS LIBRARY*/
    $(document).foundation();