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

0
votes

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.

1
jqueryjquery-mobilemenuzurb-foundationzurb-foundation-5
i can't see any element with id header-master. – Mohit Kumar
Added the header - header-master and cloned header. Thanks – Joseph
you are missing close bracket ) in last – Mohit Kumar
and di you try $("#header-master").clone(true).appendTo("#header-child"); – Mohit Kumar
Tried using $("#header-master").clone(true).appendTo("#header-child"); Did't work. Results the same. Missed copying the brackets. Edited. – Joseph

1 Answers

0
votes

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();