lost functions?

hi

i’m new to barba but it seems to be an outstanding framework

i use several functions on my main page - they open/close popups, side menus and so on. from there i can jump to three detail views with barba - everything works fine. but coming back from a detail view to the main page again - all functions are off?

• i load my functions together with barba view/transition controller in a single .js file outside the barba-wrapper just before closing the body tag. (-> views.js)

• all js stuff is wrapped inside document.addEventListener("DOMContentLoaded", function() {..}

• both pages (home & detail) use the same .js file.

• html & js is strictly separated

• both pages have the same dependencies (css, fonts, libraries)

• adding the .no-barba class to the back button of the detail page and everything works as intended …

there must be something in barba i do wrong - why does it kill my functions?

thanks for your help mad

[luruke]

Hello @ZAAK-ZURICHBERLIN , Barba.js never kills your functions.

Let’s take $("#MenuTrigger").click(...) for example:

• When you load the first page, an event listener is created for #MenuTrigger currently on your DOM.
• When you change page with barba, the content of the next page is injected, that means that if a new #MenuTrigger is added, it won’t trigger your click function.

Use barba event newPageReady to “reattach” your events on the new DOM elements. Of course this applies just of the contents inside your barba-container.

If you want to know more on about barba.js works under the hood, you can read this article I wrote: https://www.smashingmagazine.com/2016/07/improving-user-flow-through-page-transitions/

[StudioZAAK]

aaarghh… there was a single onclick="" in my detail.html page that was breaking everything 😃 so strictly separate html & js as you anyway should do but in barba universe it seems to be mandatory. still i would appreciate a more detailed explanation of the barba event newPageReady

thank you for making barba.js - love it