JQuery Click Event After New Page Loads

I've got a web project using Node/Express/Handlebars I've got a sticky navigation on the side which is rendered through a handelbars partial. When a link is clicked and the page lo

Solution 1:

I'm not sure if what you're trying to do is possible or not..

If the page reloads, you will lose any state that isn't somehow backed up. So you'll need some sort of data source or session.

If you do not need the page to reload, you can "return false;" at the end of your click functions and that should prevent the page reload and give you the class changes that you're looking for.

if your click event is changing the route, i'd recommend a script that runs after the page load is complete (on document ready)

$(function () { your code here }) 

that checks the current route and sets the css classes there based on the route. (instead of based on what was clicked, since you'll lose that information on a page load, but you will still have the route.)

location.href

Solution 2:

HTTP is stateless.

Anytime a page is refreshed, its state is lost, and your page doesn't know where it was. So, you need to figure out a way to persist the state across your pages.

For example, you can use browser's this API to persist the state in local storage. Local storage is persistent for a hostname. So, anytime a link is clicked, you can store its details in the local storage, and when your DOM is ready again, you can read the same value from the local storage and make that link active.

More ways can be found out in this discussion.

Solution 3:

You can not do it this way, because when page is reloaded, it is a complete new HTTP request and it looses the last even performed on previous page. what you can do is based on the url you can set the class = "nav-active" using server side scripting, say you are using php then you can try something like

Setting $page = "platform"

and while writing html you can add

<div class="sticky-hand tools-nav" id="tools-sticky" class="<?php ($page=='tools')?"active":"" ?>" >
<div class="sticky-hand platform-nav" id="tools-sticky" class="<?php ($page=='platform')?"active":"" ?>" >