Update events listeners for page specific scripts

Guide/architecture.markdown

@@ -114,13 +114,26 @@ Your global, non-page specific, JavaScript code can be placed in `app.js`.
 E.g. the `app.js` could look like this:
 
 ```javascript
-$(function () {
-    initNavbarEffects();
-});
+$(document).on('ready turbolinks:load', function () {
+    // This is called on the first page load *and* also when the page is changed by turbolinks.
 
-function initNavbarEffects() {
-    // ...
-}
+    // We make sure also the bind our events only once, so if a user navigates to
+    // another page and back, we won't try to bind the same event twice.
+        // Init sortable.
+    document.querySelectorAll('.js-my-selector').forEach(function (elem) {
+
+        // Check if the element is already initialized.
+        if (Boolean(elem.jsMySelectorInitialized) === false) {
+
+            // Bind event handlers here.
+            // ...
+
+            // Mark the element as initialized, so we won't bind the event handler twice.
+            elem.jsMySelectorInitialized = true;
+        }
+    });
+
+});
 ```
 
 In your `Web.View.Layout` just import the `app.js`:

Guide/view.markdown

@@ -361,21 +361,21 @@ Preloading with InstantClick on hover will only happen with links that
 
 (So putting an anchor on a link, or explicitly setting the `data-turbolinks-preload` attribute to `false`, will let you selectively turn off preloading for that link.)
 
-We provide two custom events
-
--   `ihp:load` that will trigger when `DOMContentLoaded` or `turbolinks:load`
--   `ihp:unload` that will fire on `beforeunload` and before [morphdom patches the page](#TurboLinks)
+Triggered events:
 
 ```javascript
-document.addEventListener('ihp:load', () => {
+$(document).on('ready turbolinks:load', () => {
     console.log('Page Loaded');
 });
 
-document.addEventListener('ihp:unload', () => {
+$(document).on('beforeunload', () => {
     console.log('Page Unloaded');
 });
 ```
 
+Note that when using jQuery there's a some difference from using `document.addEventListener`, which you can read about [here](https://api.jquery.com/ready/).
+Notably the part about "If the DOM becomes ready and the browser fires `DOMContentLoaded` before the code calls `.ready( handler )`, the function handler will still be executed."
+
 ## JSON
 
 Views that are rendered by calling the [`render`](https://ihp.digitallyinduced.com/api-docs/IHP-Controller-Render.html#v:render) function can also respond with JSON.

lib/IHP/static/helpers.js

@@ -1,10 +1,3 @@
-var ihpLoadEvent = new Event('ihp:load');
-var ihpUnloadEvent = new Event('ihp:unload');
-
-window.addEventListener('beforeunload', function () {
-    document.dispatchEvent(ihpUnloadEvent);
-});
-
 document.addEventListener('DOMContentLoaded', function () {
     initDelete();
     initDisableButtonsOnSubmit();
@@ -13,8 +6,6 @@ document.addEventListener('DOMContentLoaded', function () {
     initTime();
     initDatePicker();
     initFileUploadPreview();
-
-    document.dispatchEvent(ihpLoadEvent);
 });
 
 document.addEventListener('turbolinks:load', function () {
@@ -34,8 +25,6 @@ document.addEventListener('turbolinks:load', function () {
     }, 1);
 
     initDatePicker();
-
-    document.dispatchEvent(ihpLoadEvent);
 });
 
 function initTime() {
@@ -417,8 +406,6 @@ window.transitionToNewPage = function (newHtml) {
         return;
     }
 
-    document.dispatchEvent(ihpUnloadEvent);
-
     var isModalOpen = document.body.classList.contains('modal-open');
     morphdom(
         document.body,