html - jQuery click event after new page loads

Question

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 loads I want the active state to change to the element that was clicked. I've tried both .click() and .on('click', child, callback) . It works when I click it, but it resets after the DOM reloads.

Thank you kindly for your help Stackoverflow.

Here's my jQuery:

//NAVIGATION ACTIVES
$('.stickynav').on('click', '.platform-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");

  });
$('.stickynav').on('click', '.tools-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.diensten-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.blog-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });

And HTML (.hbs) :

<div class="stickynav" data-spy="affix">
  <div class="hands-connector">
        <img src='/img/connector-sticky.png'  />
  </div>


<div class="hands-sticky">
  <div class="sticky-hand platform-nav nav-active" id="platform-sticky">
    <a href="/">        <img src="/img/platform-sticky.png" alt="Naar kennisplatform" />
            <p>Kennisplatform</p></a>

  </div>
  <div class="sticky-hand tools-nav" id="tools-sticky">
    <a href="/tools">
        <img src="/img/tools-sticky.png" alt="Naar gratis tools" />
        <p>
          Tools
        </p>
      </a>
  </div>
  <div class="sticky-hand diensten-nav" id="diensten-sticky">
    <a href="/diensten">
        <img src="/img/diensten-sticky.png" alt="Naar diensten" />
        <p>
          Diensten
        </p>
    </a>
  </div>
  <div class="sticky-hand blog-nav" id="blog-sticky">
    <a href="/blog?page=1">
        <img src="/img/blog-sticky.png" alt="Naar blog" />
      <p>
        Blog
      </p>
    </a>
  </div>
</div>
</div>

and the CSS class for reference (disables the link) :

.nav-active {
  text-decoration:none;
  color:black;
  -webkit-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  -ms-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  pointer-events:none;
  cursor:default;
}

Answer 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