Javascript not working when loading a page with Ajax

Question

Here is my situation, I call a js file with all my javascript which works fine.

However, when I load a new page by AJAX, the javascript related to that content loaded by AJAX is not working.

HOw is this possible to fix ?

Example:

$('div.test').on('click', function() {
alert('test')
});

work when not in ajax, but when I use ajax its not working .. .

I tried this as well:

$("body").on( "click", "div.test", function( event ) {
alert('test')
  });

and

$('div.test').on('click', function() {
alert('test')
  });

No success . . .

Any help will be fantastic.

Thank you !

EDIT:

This is my ajax call:

//jQuery plugin to simplify implementation of full page transitions

//2015 — Erik Friberg

(function($) {

'use strict';

$.cssPageTransitions = function(element, options) {

    var plugin = this;
    plugin.element = $(element);
    plugin.settings = {};

    plugin.pushed = false;

    plugin.wrapper = null;
    plugin.newElement = null;
    plugin.elementsOut = null;

    //setup defaults
    var defaults = {
        urlAttr: 'href',
        onClicked: function() {},
        onLoaded: function() {},
        // elementsOut: '#maincontainer',
        // elementsIn: '#maincontainer',
        classOut: 'is-moveout',
        classIn: 'is-movein',
        alignWithPrevious: true,
        scrollDisable: true,
        updateUrl: true,
        animationEnded: function() {},
        onErrorLoading: null
    };

    /****** PUBLIC FUNCTIONS ******/
    //check if the url is local
    plugin.localUrl = function(url) {
        if (url.indexOf(document.domain) > -1 || url.indexOf(':') === -1) {
            return true;
        }
        return false;
    };

    //Add new URL address to history
    plugin.bindNewLocalUrl = function(url) {
        //handle window location field
        if(url !== window.location) {
            //add the new page to the window.history
            window.history.pushState('{pushed: true}', null, url);
            plugin.pushed = true;
            return true;
        }
        return false;
    };

    //bind event to make back button update after pushState event
    plugin.bindBackButtonUrl = function() {
        $(window).on("popstate", function(e) {
            if(plugin.pushed || e.originalEvent.state !== null) {
                window.location.reload();
            }else{
                window.history.replaceState('{pushed: true}', null, window.location);
            }
        });
        return false;
    };

    //replaces click actions on both mobile and desktop with customFunction
    plugin.bindTouchClicks = function(elem,callbackFunction) {
        var e = 'ontouchstart' in $(window) ? 'touchstart':'click';
        //bind callback event so that this is preserved
        $(elem).on(e, function(e){callbackFunction.apply(elem,[e]);});
        return false;
    };

    //executes customFunction on animationEnd and transitonEnd
    plugin.bindAnimationTranstionEnd = function(elem, callbackFunction) {
        var animationEndEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend webkitTransitionEnd otransitonend msTransitionEnd transitionend';
        $(elem).one(animationEndEvent, function(e) {
            //prevents animationEndEvent from firing twice a bit backwards but works
            $(this).off(animationEndEvent);
            //bind callback event so that this is preserved
            callbackFunction.apply(elem,[e]);
        });
        return false;
    };

    //toggle scroll
    plugin.togglePreventWindowScroll = function(bind) {
        var scrollEvent = 'mousewheel DOMMouseScroll touchmove scroll';

        if(bind) {
            $(window).on(scrollEvent, function(ev) {
                ev.preventDefault();
            });
            return true;
        }else{
            $(window).off(scrollEvent);
        }
        return false;
    };

    /****** PRIVATE FUNCTIONS ******/

    //Start fading animation
    var startAnimationOut = function() {
        //add classes
        plugin.elementsOut.addClass(plugin.settings.classOut);
        //set the new element to align at the top of the previous content
        if(plugin.settings.alignWithPrevious) {
            plugin.wrapper.css({'overflow':'hidden', 'height':plugin.elementsOut.height()});
        }
    };

    //Start fade in animation
    var startAnimationIn = function() {
        //set the new element to align at the top of the previous content
        if(plugin.settings.alignWithPrevious) {
            var currentScroll = $(document).scrollTop();
            var offset = plugin.wrapper.offset();
            plugin.newElement.css({ "top": (currentScroll-offset.top)+"px"});
        }
    };

    //Functions after transition ends
    var registerTransitionAnimationEnd = function(e) {

        //Toggle scroll
        if(plugin.settings.scrollDisable) {
            plugin.togglePreventWindowScroll(false);
        }

        //call custom function
        plugin.settings.animationEnded.call();

        //Scroll to top of new content
        if(plugin.settings.alignWithPrevious) {
            plugin.newElement.css({});
            var offset = plugin.wrapper.offset();
            $(document).scrollTop(offset.top);
            plugin.wrapper.css({});
        }

        //remove classes
        plugin.element.removeClass(plugin.settings.classOut);
        plugin.newElement.removeClass(plugin.settings.classIn);
        return false;
    };

    //Register classes and handle logic
    var registerCssPageTransitions = function(data, response, status, xhr) {
        //on error
        if ( status == "error" ) {
            //Call custom function
            if($.isFunction(plugin.settings.onErrorLoading)){
                plugin.settings.onErrorLoading.call();
            }else{
                //if no custom error function was defined, send the user to the page without effects
                window.location.href = plugin.element.attr(plugin.settings.urlAttr);
            }
            return false;
        }

        //insert loaded element into page
        plugin.newElement = data.children().addClass(plugin.settings.classIn).insertAfter(plugin.elementsOut);

        //start animating in
        startAnimationIn();

        //Call custom function
        plugin.settings.onLoaded.call();

        //bind new url
        if(plugin.settings.updateUrl === true){
            plugin.bindNewLocalUrl(plugin.element.attr(plugin.settings.urlAttr));

            //set the document title to match the link
            var title = plugin.element.attr('title');
            if( typeof(title) !== 'undefined'){
                document.title = title;
            }
        }

        //handle animationEnds
        plugin.bindAnimationTranstionEnd(plugin.newElement, registerTransitionAnimationEnd);
        return false;
    };

    //Retrive from url
    var registerLoadUrl = function(e) {
        var url = plugin.element.unbind(e)
            .attr(plugin.settings.urlAttr);

        //check if the link is local or not
        if(!plugin.localUrl(url)) {
            return false;
        }

        //prevent default link action
        e.preventDefault();

        //Call custom function
        plugin.settings.onClicked.call();

        //start animating out
        startAnimationOut();

        //bind scrollevent
        if(plugin.settings.scrollDisable) {
            plugin.togglePreventWindowScroll(true);
        }

        //load the next page
        var data  = $('<div>').load( url +' '+plugin.settings.elementsIn, function(response, status, xhr) {
            registerCssPageTransitions.apply(plugin.element,[data,response,status,xhr]);
        });
        return false;
    };

    //inits the plugin object
    plugin.init = function() {
        plugin.settings = $.extend({}, defaults, options);
        plugin.elementsOut = $(plugin.settings.elementsOut);

        //add wrapper
        if(plugin.settings.alignWithPrevious) {
            plugin.wrapper = $('#js-CssPageTransitionsWrapper');

            //create new if wrapper doesn’t exist
            if (!plugin.wrapper.length) {
                var wrapper = $('<div />').attr('id','js-CssPageTransitionsWrapper');
                plugin.elementsOut.wrapAll(wrapper);
                plugin.wrapper = $('#js-CssPageTransitionsWrapper');
            }
        }

        //store the initial page
        if('state' in window.history && window.history.state !== null) {
            window.history.replaceState({path: document.location.href}, document.title, document.location.href);
        }

        //bind back button for corrected behaviour
        if(plugin.settings.updateUrl === true){
            plugin.bindBackButtonUrl();
        }

        //Trigger the plugin on click
        plugin.bindTouchClicks(element, registerLoadUrl);
        return false;
    };

    //Fire up the plugin
    plugin.init();

};

// add the plugin to the jQuery.fn object
$.fn.cssPageTransitions = function(options) {
    return this.each(function() {
        if (undefined === $(this).data('cssPageTransitions')) {
            var plugin = new $.cssPageTransitions(this, options);
            $(this).data('cssPageTransitions', plugin);
        }
    });
};


// Open Logic Overview from product page starts
$('#btnLgcOverview').click(function(){
alert('YO')
if (vLgcOverviewContentStatus == "closed"){
    // clear the stage
    clearTheStage();        
    // move dilo container onto the stage       
    $("div#containerLgcOverview").animate({left: '0px'});
    vLgcOverviewContentStatus = "open"; 
    // move dilo slide position to first slide
    swiperLogicOverview.slideTo(1, 1, true);    
}
else {
    $("div#containerLgcOverview").animate({left: '-1920px'});
    vLgcOverviewContentStatus = "closed";
}
});
// /Open Logic Overview from product page ends  
// Open Logic Dilo J1 from product page starts



})(jQuery);

Then in page1 I have:

<script>
    var registerCssTransitions = function () {
        //add transition to .prev
        $('.home').cssPageTransitions({
            // elementsOut: '#maincontainer',
            // elementsIn: '#maincontainer',
            classOut: 'is-moveout-left',
            classIn: 'is-movein-left',
            animationEnded: function () {
                $('.is-moveout-left').remove();
                registerCssTransitions();
            }
        });

        //add transitions to .next
        $('.logictest').cssPageTransitions({
            elementsOut: '#maincontainer',
            elementsIn: '#logic-ajax-container',
            classOut: 'is-moveout-right',
            classIn: 'is-movein-right',
            animationEnded: function () {
                $('.is-moveout-right').remove();
                registerCssTransitions();
            }

        });
    };

    $(document).ready(function () {
        registerCssTransitions();
    });
</script>

Which make my 'page2' appear . .. . . }The file with all the jquery i have put first is call in the header .... if that helps ?

Can you clarify what you mean with: `when i load a new page by AJAX` ? What happens to the page after you loaded it? Do you replace then current page with the new page? Or do you update the current page with pieces of the ajaxed page? Where is the script tag that doesn't work defined? — Shilly, Feb 23 '18 at 12:46
You could load all javascript functions on the main page. Why don't you? — Emmanuel Delay, Feb 23 '18 at 12:50
Please show more code. There's multiple reasons that can cause this, so without more code, we're basically guessing. — Shilly, Feb 23 '18 at 12:54
Hi All, I just added all the code . . hope it make more sense ?? All functios are call in the main page . ... — thibaultlgd, Feb 23 '18 at 13:20
I am not getting your question but try to remove var plugin = this, and declare it outside the function. — Ankit Kumar Gupta, Feb 23 '18 at 13:38
document.ready only happens once when the page is loaded, not when additional content is inserted. Run the function without ready. — Spokey, Feb 23 '18 at 15:57
can you give me an example by any chance ? im really struggling . . .to whcih file should it go ? — thibaultlgd, Feb 23 '18 at 15:58

score 0 · Answer 1 · answered Feb 23 '18 at 12:55

0

You can use the eval function for this. Here is a demo function to help you out

parseInnerHTMLScripts : function(){
    var arr = document.getElementById('your-div-here').getElementsByTagName('script');
    for (var n = 0; n < arr.length; n++)
        eval(arr[n].innerHTML)//run script inside div
},

Please be aware that eval has performance issues and make your decisions wisely. Read here

Also, if you are using Jquery you can always use .on

Hope, this helps

answered Feb 23 '18 at 12:55

Gurmeet Singh

774
8
21

2

Please don't teach people the use of `eval()` for anything that isn't completely neccesary. In most cases, there's a better alternative and adding eval just introduces caveats and possible hacks. In this case, creating a script tag with document.createElement and setting its innerHTML will do exactly the same thing, without having to resort to eval. – Shilly Feb 23 '18 at 12:58
@Shilly Haven't I already mentioned that in the answer? Also, it is necessary for everyone to know about it both pros and cons. Using it is eventually up to them and their use case. But still if you say so I'll restrain myself in future. – Gurmeet Singh Feb 23 '18 at 13:01
@Shilly document.createElement solution will work only if it has a script tag loading js through an external source. I don't think that is the case with this user. – Gurmeet Singh Feb 23 '18 at 13:03
1

That's true, but it's usually a best practice to have the extra JS in a seperate file to begin with. – Shilly Feb 23 '18 at 13:08

Javascript not working when loading a page with Ajax

1 Answers1