How to use Jquery load along with functions?

So I am using Jquery load to load navigation bar on my website.
Here’s how im doing it

Homepage.html

<div id="nav-placeholder">

</div>

<script>
      jQuery(document).ready(function($) {
        jQuery("#nav-placeholder").load("navbar.html");
      });
</script>

navbar.html

<div class="navbar">
  <a href="#">Phemesoft</a>
  <a href="/studdash">Dashboard</a>
  <a href="/courselists">Courses</a>
  <a href="#">Live classes</a>
  <a href="#">Labs</a>
  <div class="search">
    
    <input id="searchqueryy"  name="searchquery" type="search" placeholder="Search" class="inputSearch" />
     <button onclick="searchfunction()" type="submit" class="searchButton">
           <i class="fa fa-search"></i>
        </button>
        
  </div>
  <!-- <button type="submit" class="searchbtn">
    <span class="material-icons">search</span>
  </button> -->
  <span class="material-icons">shopping_cart</span>
  <span class="material-icons">account_circle</span>
</div>

Since I have a server running, to load the navbar I have used app.get like so:

app.get("/navbar.html",function(request,response){
  response.sendFile(path.join(__dirname, "../client/App/", "navbar.html"));
});

And the search function looks like this:

<script>
  function searchfunction(){
    var searchquery = document.getElementById('searchqueryys').value;
    window.location.href = "/search/"+searchquery;
  }
  </script>

Now the problem is, after loading the navigation bar using jQuery.load, searchfunction isn’t working. I tried putting the searchfunction() script inside navbar.html but it doesn’t work like that (maybe because navbar.html has already been loaded when homepage.html was opened?). So how do I make my search function work across pages while using jQuery.load?