从另一个文件加载的导航栏中的弹出框不起作用

Question

我正在构建一个带有导航栏的网站，我从另一个 html 文件加载，如下所示：

导航栏 HTML

<nav class="navbar fixed-top navbar-expand-lg bg-dark navbar-dark">
  <a class="navbar-brand" href="index.html">Site</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
    <a class="nav-item nav-link" href="about.html">About</a>
    <a class="nav-item nav-link" href="dashboard">Dashboard</a>
    <a class="nav-item nav-link" id="popover" href="#" )">Login</a>
    <div id="popover-content" class="d-none">
      <div class="form-inline">
        <input type="text" class="form-control" id="username" placeholder="Username" required>
      </div>
      <div class="form-inline">
        <input type="password" class="form-control" id="loginPassword" placeholder="Password" required>
      </div>
      <button type="submit" class="btn btn-primary" id="loginSubmit">Submit</button>
    </div>    
    <a class="nav-item nav-link" href="signup.html">Sign Up</a>
    </div>
  </div>
</nav>

这里是 jQuery 将其拉入页面：

$(function(){
   $("#nav-placeholder").load("navbar.html");
});

这可以正常工作，并且导航栏会加载到页面上。但是在导航栏中（如果您在上面的代码中注意到）有一个弹出框，当用户单击登录按钮时，我想工作。

这是popover代码：

$('a[rel=popover]').popover();
$("#popover").popover({
    html: true, 
    container: 'body',
    content: function() {
      return $("#popover-content").html();
    }
})

如果我在页面本身上有整个导航栏代码，则此弹出框有效，但为了保持代码干净，我更喜欢从另一个文件加载导航栏。但是当这样做时，弹出窗口根本不起作用。我在控制台上也没有错误。什么都没有发生 :(

有什么建议吗？

注意：要让导航栏从另一个 HTML 文件加载，我需要运行一个 simpleHTTPServer。这会导致问题吗？

谢谢！

Answer 1

在jQuery加载callback函数中初始化popover。

$(function(){
    $("#nav-placeholder").load("navbar.html",function(){
        $('a[rel=popover]').popover();
        $("#popover").popover({
            html: true, 
            container: 'body',
            content: function() {
            return $("#popover-content").html();
        }
        })
    });
});

Demo

Answer 2

弹出框代码是在导航栏加载代码之前还是之后？ 弹出框脚本应该在导航栏加载脚本之后。

希望这会有所帮助。