jQuery function not working if anchored link clicked in different page-CodePudding

My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn't work? It goes back to page-1 fine but body on page-1 doesn't turn black as expected?

HTML on page-1:

<a href="#key-features" >
  <span>Key features</span>
</a>

HTML on page-2:

<a href="page-1.htm#key-features" >
  <span>Key features</span>
</a>

jQuery:

$("#offcanvas a").click(function(){
    $('.offcanvas').offcanvas('hide');
    $("body").css('background-color', '#000000')
});

Many thanks in advance for your help. B]

CodePudding user response：

please use below html structure you have not define id on html structure

<div id="offcanvas">
<a href="#key-features" >
  <span>Key features</span>
</a>
</div>

CodePudding user response：

So I manage to find the solution, this works:

$("#offcanvas a").on("click", function() {
    if (window.location.hash) {
      $("body").css('background-color', 'black');
}