jquery - 从另一个文件加载的导航栏中的弹出窗口不起作用

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");
});

这工作正常，导航栏加载到页面上。但是在导航栏中(如果您在上面的代码中注意到)有一个弹出窗口，我想在用户单击“登录”按钮时使用它。

这是弹出框代码:

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

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

有什么建议吗？

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

谢谢!

Answer 1

在 jQuery 加载回调函数中初始化弹出框。

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

Demo