使用jQuery包含header.html，并丢失CSS格式

我有一个简单的静态HTML站点，其中有一个header.HTML文件，我希望在每个页面上重复使用。我遵循了这个建议，这个建议似乎有效，但导致了悬停下拉菜单不再起作用（必须单击）。顶部是使用jQuery.load的导航栏，底部是内联放置在my index.html中的相同代码。我的css和js文件都包含在index.html文件中，而不是header.html文件中。有没有想过为什么会发生这种情况

在我的标题中，我有以下代码：

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

$（文档）.ready（函数（）{
$（“#header”）.load（“header.html”）；
$（“#footer”）.load（“footer.html”）；
});

..为了包含页眉/页脚，我有：

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

my current header.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>

电子邮件




立即拨打电话


顾客#


切换导航

重新发布，作为对这种有利可图的声誉的回答

您声明正在此处加载内容：

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

<>这听起来像是在DOM中添加了一个新的元素，如果你还没有准备好一个<代码> div *标题出现在它们中间，这可能会破坏你的CSS选择器规范。我先看看这里

---

另一个问题是DOM将准备就绪，而

尚未加载。然后，您将使用jQuery将新元素加载到DOM中，在DOM完成加载新HTML后，这些元素可能仍需要初始化。

header.HTML的内容是什么？请提供您的问题的详细信息，以便我们可以查看重现和修复问题所需的所有部分。您的CSS是否考虑了

上方的新

div#header

？在将新内容加载到DOM中后，是否必须（重新）初始化jQuery插件？这个问题似乎缺少重要的细节。你能简化这个例子吗？@rand'Chris-你是对的。我消除了标记之间的差异，这是我问题的根源，然后尝试从header.html类中调用my template.js（用于初始化我的js插件），瞧！