Events dont fire on next page

[arjunmenon]

Hey I have smoothstate function in both on index.html and nextpage.html

In nextpage.html I have setup smoothstate like so

$(function(){
      'use strict';
      var $page = $('#main'),
          options = {
            debug: true,
            prefetch: true,
            cacheLength: 4,
            onStart: {
              duration: 350, // Duration of our animation
              render: function ($container) {
                // Add your CSS animation reversing class
                $container.addClass('is-exiting');
                // Restart your animation
                smoothState.restartCSSAnimations();
              }
            },
            onReady: {
              duration: 0,
              render: function ($container, $newContent) {
                // Remove your CSS animation reversing class
                $container.removeClass('is-exiting');
                // Inject the new content
                $container.html($newContent);
                alert(' from onready');
                console.log('this is onready on nextpage.html');
              }
            }, 
            onAfter: function ($container, $newContent) {
                alert(' from onafter');
                console.log('this is onafter on nextpage.html');
            }
          },
          smoothState = $page.smoothState(options).data('smoothState');
    });

The alert and console.log dont register when I nevigate to nextpage.html

Instead, I see the alert and console.log I had configured similarly in the smoothstate function in index.html

How can I execute scripts written in nextpage.html to execute only on nextpage.

At present, what I am doing is to write the scripts in index.html, which runs on nextpage.html when loaded. But it runs twice when I navigate back to index.html from nextpage.html

[rajeshworkz]

@arjunmenon hey any luck I'm having the same issue events are not firing after change the page

[schroef]

I run in the same issue i think. The first transition works, then nothing can be clicked. When check dev tools all i see is bootstrap triggers, none of the others?

Tried adding the log as above, none are triggered actually

EDIT i had a small typo, it does show both messages. Yet still nothing is clickable after that?

I used the simple example from acnhor-transitions. I see this variable $container, but nowhere is it in the files? Wonder why there setup works. I coped all classes exactly over, same css setup

(function ($) {

    'use strict';

    $(document).ready(function () {

        // Init here.
        var $body = $('body'),
            $main = $('#main'),
            $site = $('html, body'),
            transition = 'fade',
            smoothState;

        smoothState = $main.smoothState({
            onBefore: function($anchor, $container) {
                var current = $('[data-viewport]').first().data('viewport'),
                    target = $anchor.data('target');
                current = current ? current : 0;
                target = target ? target : 0;
                if (current === target) {
                    transition = 'fade';
                } else if (current < target) {
                    transition = 'moveright';
                } else {
                    transition = 'moveleft';
                }
            },
            onStart: {
                duration: 400,
                render: function (url, $container) {
                    $main.attr('data-transition', transition);
                    $main.addClass('is-exiting');
                    $site.animate({scrollTop: 0});
                }
            },
            onReady: {
                duration: 0,
                render: function ($container, $newContent) {
                    $container.html($newContent);
                    $container.removeClass('is-exiting');
                }
            },
        }).data('smoothState');

    });

}(jQuery));

Okay container seems like a global thing, still not sure where this comes from. I tried log $container.text and i get the complete page. So somewhere it is declared.

[schroef]

Okay i found my issue. Im using this on a CEP panel for photoshop. For that the scripts are all added before the end body tag. I just learned yesterday about innerHTML function. So when i noticed that a light went on. Probably that messes up all code. I tried moving the body tag up, but it somehow gets place back down?? Sorry I'm no webdev, just like to fiddle around.