Question

我有这段代码：

<body class='homepage'>
    <div id='wrapper'>
        <header id='header'></header>
        <div id='main' role='main'>
        ...

因为有很多HTML页面，所以我决定在每个页面中包含标题，方法是将html放在header.html中并使用这个jQuery：

    <script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>

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

    <script src="assets/javascripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/modernizr/modernizr.custom.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/hover_dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/plugins/retina/retina.min.js" type="text/javascript"></script>
    // etc... there are about a dozen js scripts

瞥一眼，看起来很好。但是，我发现的问题是，当我使用这个jQuery包含方法时，我在标题中的效果（例如，将鼠标悬停在导航链接上应该显示导航菜单）不起作用。如果我复制并粘贴完整的标题并将其放回#header，那么它再次正常工作。

所以我认为这肯定是一个时间问题，也许在包含适当的jQuery脚本之前加载标题（只是一个猜测？我试过将load()移到其他脚本下但是没有工作）。

我该怎么做才能解决这个问题？

Answer 1

您基本上调用ready()函数，这意味着，在DOM准备好时放置头文件。因此，大多数事件都与不存在的元素绑定在一起。

如果您有后端代码，则可以预先在模板视图文件中渲染导入。

或者，您也可以使用event delegation来处理所需的事件。

Answer 2

详细说明@Incognito的答案（我没有足够的代表发表评论）：

你有代码在加载后向标题区添加类（我猜），但标题还没有。要使.load（）在这种情况下工作，只需在加载完成后调用头文件初始化代码。

$(selector).load('url/to/header.html', function () {
    // init header
})

（推荐）您应该在将其发送到客户端之前使用的任何后端系统中构建页面。通过使用负载，您不仅可以进行额外的AJAX调用，而且我还希望UX能够降低，因为标题会弹出＆＃39;在加载后的某个时刻。

jQuery加载导致效果停止工作

2 个答案: