JS не работает после перехода на перенаправленную страницу

Question

В настоящее время я использую PhoneGap и Framework 7 в качестве материала для самообучения.

Но я заметил, что после того, как я перехожу на перенаправленную страницу, все, что написано в моем файле.JS, больше не работает (например, предупреждение при нажатии кнопки, загрузка Google Map и т. Д.).

На странице индекса все работало нормально. Кроме того, в Framework7 v1 он мог использовать app.onPageInit в качестве решения для выполнения JS, когда страница инициализируется, для v2 я не смог этого добиться.

app.js

// Framework7 App main instance
var app  = new Framework7({

  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  // App root data
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  // App root methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  touch: {
    tapHold: true //enable tap hold events
  },  
  // App routes
  routes: routes,
});

// Dom7
var $$ = Dom7;

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/'
});

// Login Screen Demo
$$('#my-login-screen .login-button').on('click', function () {
  var username = $$('#my-login-screen [name="username"]').val();
  var password = $$('#my-login-screen [name="password"]').val();

  // Close login screen
  app.loginScreen.close('#my-login-screen');

  // Alert username and password
  app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
});


$$('.swiper-container').on('taphold', function () {
  app.dialog.alert('Tap hold fired!');
  swiper.autoplay.stop();
});

// ------------------------------Google Maps------------------------------
// app.onPageInit('maps', function (page) {
//   console.log('maps');
// });

var map;
document.addEventListener("deviceready", function() {
  var div = document.getElementById("map_canvas");

  // Initialize the map view
  map = plugin.google.maps.Map.getMap(div);

  // Wait until the map is ready status.
  map.addEventListener(plugin.google.maps.event.MAP_READY);
}, false);

$$('.mapbtn').on('click', function (e) {
  console.log('Testing');
  // Move to the position with animation
  map.animateCamera({
    target: {lat: 37.422359, lng: -122.084344},
    zoom: 17,
    tilt: 60,
    bearing: 140,
    duration: 5000
  }, function() {

    // Add a maker
    map.addMarker({
      position: {lat: 37.422359, lng: -122.084344},
      title: "Welecome to \n" +
             "Cordova GoogleMaps plugin for iOS and Android",
      snippet: "This plugin is awesome!",
      animation: plugin.google.maps.Animation.BOUNCE
    }, function(marker) {

      // Show the info window
      marker.showInfoWindow();

      // Catch the click event
      marker.on(plugin.google.maps.event.INFO_CLICK, function() {

        // To do something...
        alert("Hello world!");

      });
    });
  });
});

$$('.alertbtn').on('click', function (e) {
  console.log('This is alert btn');
});
// ---------------------------------------------------------------------------------
app.init(); 

---

route.js

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    path: '/about/',
    url: './pages/about.html',
  },
  {
    path: '/form/',
    url: './pages/form.html',
  },
  {
    path: '/maps/',
    url: './pages/maps.html',
  },
  // Page Loaders & Router
  {
    path: '/page-loader-template7/:user/:userId/:posts/:postId/',
    templateUrl: './pages/page-loader-template7.html',
  },
  {
    path: '/page-loader-component/:user/:userId/:posts/:postId/',
    componentUrl: './pages/page-loader-component.html',
  },
  {
    path: '/request-and-load/user/:userId/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // Router instance
      var router = this;

      // App instance
      var app = router.app;

      // Show Preloader
      app.preloader.show();

      // User ID from request
      var userId = routeTo.params.userId;

      // Simulate Ajax Request
      setTimeout(function () {
        // We got user data from request
        var user = {
          firstName: 'Vladimir',
          lastName: 'Kharlampidi',
          about: 'Hello, i am creator of Framework7! Hope you like it!',
          links: [
            {
              title: 'Framework7 Website',
              url: 'http://framework7.io',
            },
            {
              title: 'Framework7 Forum',
              url: 'http://forum.framework7.io',
            },
          ]
        };
        // Hide Preloader
        app.preloader.hide();

        // Resolve route to load page
        resolve(
          {
            componentUrl: './pages/request-and-load.html',
          },
          {
            context: {
              user: user,
            }
          }
        );
      }, 1000);
    },
  },
  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

maps.html

<div data-page="maps" class="page" data-name="maps" >
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Maps</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">This is Maps</div>
    <div class="block block-strong">
    </div>
    <div class="block">
          <div id="map_canvas" style="width: 300px;height: 300px">Maps</div> 
          <button class="mapbtn" id="button">Button</button>
          <button class="alertbtn">ALERT!!!!!</button>
    </div>
  </div>
</div>