jQuery hash change not firing on mobile

Question

I have a menu that is using anchor tags to serve different content depending on which anchor is selected. When the menu item is fired an active class is added to the parent by matching the hash on the link with the hash in the browser url.

Everything works perfectly on desktop but once I go to mobile I it does not fire.

The code is as follows:

$(window).on('hashchange', function(e) {
    if ($('.menu-item').hasClass('active')) {
        $(".menu-item").removeClass("active");
        $('[href$="' + window.location.hash + '"]').parent(this).addClass("active");
    }
});

#artistNavigation {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  text-align: left;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
  font-family: "Oswald", sans-serif;
  box-shadow: 0 1px 0 0 #ddd;
  -webkit-box-shadow: 0 1px 0 0 #ddd;
}
@media (max-width: 1000px) {
  #artistNavigation {
    padding-top: 50px;
    width: calc(100% - 60px);
    position: relative;
  }
  #artistNavigation.open li.menu-item {
    display: block;
  }
}
#artistNavigation li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-align: left;
  vertical-align: middle;
  padding-right: 45px;
  position: relative;
  /*active state*/
}
@media (max-width: 1000px) {
  #artistNavigation li {
    display: block;
    text-align: center;
  }
  #artistNavigation li.mobi {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 99;
  }
  #artistNavigation li.menu-item {
    display: none;
    list-style-type: none;
  }
  #artistNavigation li.active {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 70px;
    height: 30px;
    z-index: 89;
    display: block;
    background: #fff;
  }
  #artistNavigation li.active a {
    -webkit-transform: translateX(35px);
    transform: translateX(35px);
  }
}
#artistNavigation li a {
  -webkit-transition: color 200ms ease;
  -moz-transition: color 200ms ease;
  -o-transition: color 200ms ease;
  -ms-transition: color 200ms ease;
  transition: color 200ms ease;
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 17px 0;
  text-align: center;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  color: #b2b2b2;
  position: relative;
  border-bottom: solid 2px transparent;
}
@media (max-width: 1000px) {
  #artistNavigation li a {
    padding: 1rem 0;
  }
}
#artistNavigation li a,
#artistNavigation li a:visited,
#artistNavigation li a:active,
#artistNavigation li a:link {
  color: #b2b2b2;
}
#artistNavigation li:hover > a,
#artistNavigation li:focus > a,
#artistNavigation li.active a {
  color: #000;
  border-bottom: solid 2px #25cbd3;
}
#artistNavigation li.pdf {
  position: absolute;
  right: 0;
  top: 12px;
  padding-right: 0;
  text-transform: uppercase;
  font-size: 12px;
  color: #25cbd3;
  padding-bottom: 16px;
  border-bottom: solid 2px transparent;
}
#artistNavigation li.pdf:hover {
  cursor: pointer;
  color: #454545;
}
@media (max-width: 1000px) {
  #artistNavigation:hover,
  #artistNavigation:focus {
    height: auto;
  }
  #artistNavigation li:active {
    position: absolute;
    top: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="art-nav" role="navigation">
  <div class="artist-nav-box">
    <ul id="artistNavigation">
      <li class="menu-item active"><a href="#Commercial">Commercial</a>
      </li>
      <li class="menu-item"><a href="#Fashion">Fashion</a>
      </li>
      <li class="menu-item"><a href="#Lifestyle">Lifestyle</a>
      </li>
      <li class="menu-item"><a href="#Portaits">Portaits</a>
      </li>
      <li class="menu-item"><a href="#Places">Places</a>
      </li>
      <li class="menu-item"><a href="#Animals">Animals</a>
      </li>
      <li class="menu-item"><a href="#Great-White-Shark">Great White Shark</a>
      </li>
      <li class="menu-item"><a href="#Panoramics">Panoramics</a>
      </li>
      <li class="menu-item"><a href="#Masai">Masai</a>
      </li>
    </ul>
  </div>

</nav>

I'm sure it is something simple I am missing, please excuse the sass generated CSS.

Answer 1

You can try to use an addEventListener for detect hash change.

window.addEventListener("hashchange",function(event){
    if ($('.menu-item').hasClass('active')) {
        $(".menu-item").removeClass("active");
        $('[href$="' + window.location.hash + '"]').parent(this).addClass("active");
    }
});

Find more about if browser compatible here