History Api Statechange Function Script Duplicates Function Calls Each Time Change Occurs

I'm using the jquery history plugin in a simple demo that loads in a section of a specific page each time you click a nav item, what i've found though is that each time I click a n

Solution 1:

Have you tried to move

// Bind to StateChange EventHistory.Adapter.bind(window, 'statechange', function() {
    varState = History.getState();

    mainContent.fadeOut(function() {
        $(this).empty();
        console.log('this ran');
        preloader.fadeIn();
        loadContent(mainContent, location.pathname);
    });           
});

before

navLink.on('click', function(e){