未捕获类型错误：无法读取未定义的属性'scrolltop' - Zurb Foundation 和 Jquery Mobile

Question

我有一个应用程序构建使用Jquery移动和Zurb基础CSS。我有一个共同的菜单在主页的标题和克隆副本在其他页面。我已经使用了响应式菜单使用基础的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>

当我点击菜单时，它会展开并响应点击/点击动作。再次执行同样的操作会出现Uncaught TypeError: Cannot read property 'scrolltop' of undefined的错误。控制台显示Foundation.min.js

错误

我正在克隆

中的菜单

$(document).on("pagecreate", "#page-next", function ()
     {
         $("#header-master").clone().appendTo("#header-child");
    }
    return false;
 });

在创建事件之前，我也尝试克隆页头。

Answer 1

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

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