Question

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

Navbar 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

弹出窗口代码在导航栏加载代码之前或之后？弹出窗口脚本应该在导航栏加载脚本之后。

希望这有帮助。

Answer 2

在jQuery加载回调函数中初始化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

从另一个文件加载的Navbar中的弹出窗口不起作用

2 个答案: