Включенный заголовок. html с использованием jQuery и потерянное CSS форматирование

Question

У меня есть простой сайт stati c HTML с заголовком. Файл html, который я хотел бы повторно использовать на каждой из страниц. Я последовал предложению , как загрузить верхний и нижний колонтитулы перед содержимым, используя jquery .load () , которое, казалось, работало, но вызвало, что выпадающий список при наведении больше не работает (должен быть нажат). Верхняя часть - это панель навигации, использующая jQuery .load, нижняя - идентичный код, помещенный в строку в моем индексе. html. Мои файлы css и js все включены в мой индексный файл. html, а не в заголовочный файл. html. Любые мысли о том, почему это происходит?

В моем заголовке у меня есть код ниже:

<script>
    $(document).ready(function() {
        $("#header").load("header.html");
        $("#footer").load("footer.html");
    });
 </script>

.. и включить заголовок / У меня есть нижний колонтитул:

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

Содержимое моего текущего заголовка. html Файл:

<section class="header-uper">
     <div class="container clearfix">
        <div class="logo">
           <figure>
              <a href="index.html">
              <img src="images/logo.png" alt="" width="250em">
              </a>
           </figure>
        </div>
        <div class="right-side header-padding">
           <ul class="contact-info">
              <li class="item">
                 <div class="icon-box">
                    <i class="fa fa-envelope-o spacer"></i>
                 </div>
                 <strong>Email</strong>
                 <br>
                 <a href="#">
                 <span>customer email</span>
                 </a>
              </li>
              <li class="item">
                 <div class="icon-box">
                    <i class="fa fa-phone spacer"></i>
                 </div>
                 <strong>Call Now</strong>
                 <br>
                 <span>customer #</span>
              </li>
           </ul>
        </div>
     </div>
  </section>
<header class="navbar navbar-default">
   <div class="container">
      <div class="HeaderRow">
         <div class="col-md-12">
            <!-- header-right start -->
            <!-- ================ -->
            <div class="header-right clearfix">
               <!-- main-navigation start -->
               <!-- ================ -->
               <div class="main-navigation animated">
                  <!-- navbar start -->
                  <!-- ================ -->
                  <nav class="navbar navbar-default" role="navigation">
                     <div class="container-fluid">
                        <!-- Toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           </button>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="navbar-collapse-1">
                           <ul class="nav navbar-nav navbar">
                              <li class="active"><a href="index.html">Home</a></li>
                              <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Practice <span class="caret"></span></a>
                                 <ul class="dropdown-menu">
                                    <li><a href="about.html">About Dr. Eaton</a></li>
                                    <li><a href="#">Staff</a></li>
                                    <li><a href="#">Our Office</a></li>
                                    <li><a href="services.html">Services</a></li>
                                 </ul>
                              </li>
                              <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Education <span class="caret"></span></a>
                                 <ul class="dropdown-menu">
                                    <li><a href="education.html">Eye Education</a></li>
                                    <li><a href="covid19.html">Covid 19 Safety Plan</a></li>
                                 </ul>
                              </li>
                              <li><a href="#">Optical</a></li>
                              <li><a href="insurance.html">Insurances</a></li>
                              <li><a href="contact.html">Forms & Contact Us</a></li>                              
                           </ul>
                        </div>
                     </div>
                  </nav>
                  <!-- navbar end -->
               </div>
               <!-- main-navigation end -->
            </div>
            <!-- header-right end -->
         </div>
      </div>
   </div>
</header>

Answer 1

Репост в ответ на эту прибыльную репутацию ...

Вы заявляете, что загружаете контент сюда:

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

Похоже, это добавление нового элемента в DOM, который может нарушить ваши спецификации селектора CSS, если вы не готовы к появлению div#header в середине их. Сначала я посмотрю здесь.

Другая проблема в том, что DOM будет ready, а <header> еще не будет загружен. Затем вы используете jQuery для загрузки новых элементов в DOM, и эти элементы, возможно, все еще необходимо инициализировать, когда DOM завершит загрузку нового HTML.