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

Question

I have an Application build using Jquery Mobile and Zurb Foundation CSS. I have a common Menu in the header in master page and cloned copy in other pages. I have used responsive Menu using Foundation's 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>

The cloned menu is ,

<div id="header-child">

 </div>

When I tap the menu, it expands and responds for click/tap action. Doing the same again gives an error stating Uncaught TypeError: Cannot read property 'scrolltop' of undefined. The console shows error in Foundation.min.js

I am cloning the menu in

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

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

 });

I also tried cloning the header in pagebeforecreate event.

Answer 1

Found the answer finally. I need to initialize Foundation library in all the pages where it is being used.

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