'Include HTML page with jQuery.load, search button no response

I take out the codes related to menu area (as shown below) from index.html to an independent file header.html,

enter image description here

and then include header.html into index.html with,

<body>
<div id="header"></div>

...
<script>
    $("#header").load("header.html");
</script>
</body>

However, when I click the search button, there is no response. Originally, a search box should appear as shown below.

enter image description here

The related codes are listed below, (the complete example is here)

<!-- page search box -->
<div class="page_search_box">
    <div class="search_close">
        <i class="ion-close-round"></i>
    </div>
    <form class="border-bottom" action="#">
        <input class="border-0" placeholder="Enter keyword..." type="text" />
        <button type="submit"><i class="ei ei-search"></i></button>
    </form>
</div>


  <div class="main_header_right d-flex align-items-center"> 
   <div class="header_account"> 
    <ul class="d-flex"> 
     <li class="header_search"> <a href="#"><i class="ei ei-search"></i></a> </li> 
    </ul> 
   </div> 
   <div class="canvas_open"> 
    <a href="javascript:void(0)"><i class="ion-navicon"></i></a> 
   </div> 
  </div>

What's wrong?

htmljquery


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions