0

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?

SparkAndShine
  • 17,001
  • 22
  • 90
  • 134
  • Why would clicking the button do anything? Is there some script somewhere designed to handle that event? If so, where is it? – Phil Apr 12 '22 at 02:35
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Phil Apr 12 '22 at 02:36
  • @Phil thx. there is , ``. I added the related codes to my question. – SparkAndShine Apr 12 '22 at 06:11
  • 1
    Don't load parts of your site like this with jQuery. You will only get problems, like scripts not working or having the incorrect navigation item set as active. These "includes" should happen on Backend-Side, when the code is generated. – cloned Apr 12 '22 at 06:17
  • @cloned it is a static website in my case. Should I add the same header and footer for each HTML file? Is there an alternative way? – SparkAndShine Apr 12 '22 at 08:16
  • 1
    There are thousand ways to build this. https://www.11ty.dev is one way, you can build static sites with this tool. Or use one of the other thousands that are available, don't want to advertise one specific one. Chose whatever you are most comfortable with using. Or copy-paste it into each file. But NEVER load it into the file like that, that will be super hard to maintain. – cloned Apr 12 '22 at 08:18

0 Answers0