Menu icon Foundation
multiple "back" buttons in topbar

This is on foundation 5, and this didn't use to happen on foundation 4..

After a page has been loaded on my site, Dom elements can be removed/created through JS, and it is necessary for me to use $(document).foundation() to hook the new elements with foundation. For example, in one scenario a reveal-modal element is appended to the page along with the accompanying element to trigger it.

It appears that everything in the page will only work together if I reinitialize the whole page using $(document).foundation(), instead of $(element).foundation(). When I do that there are now multiple back buttons in the topbar, where there should only be one. The amount of new back buttons correlate directly with the amount of times $(document).foundation(); has been called.

How can I re-initialize my elements with $(document).foundation() without making the top-bar's navigation have multiple back buttons? Is there a way to specify the $(document).foundation() function to not re-render the topbar? I'm thinking something like:

$(document).foundation({
//do your thing, but don't mess with the nav bar
})

I've spent about 3 hours trying to figure this out and I did google, and check SO.

Screengrab1

Screengrab2

foundation5backtopbar

This is on foundation 5, and this didn't use to happen on foundation 4..

After a page has been loaded on my site, Dom elements can be removed/created through JS, and it is necessary for me to use $(document).foundation() to hook the new elements with foundation. For example, in one scenario a reveal-modal element is appended to the page along with the accompanying element to trigger it.

It appears that everything in the page will only work together if I reinitialize the whole page using $(document).foundation(), instead of $(element).foundation(). When I do that there are now multiple back buttons in the topbar, where there should only be one. The amount of new back buttons correlate directly with the amount of times $(document).foundation(); has been called.

How can I re-initialize my elements with $(document).foundation() without making the top-bar's navigation have multiple back buttons? Is there a way to specify the $(document).foundation() function to not re-render the topbar? I'm thinking something like:

$(document).foundation({
//do your thing, but don't mess with the nav bar
})

I've spent about 3 hours trying to figure this out and I did google, and check SO.

Screengrab1

Screengrab2
Asif over 5 years ago

I had a similar problem with the back buttons but it was a very silly mistake by me. in order to use the top bar I used the block of code from the source of the foundation's doc's "Top Bar" page. I removed the block of code and used the code from one of foundation's template and everything was back to normal. I hope this helps

Mohammed Asaduallah over 5 years ago

Remove this from your code and it should work just fine:

<li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>