Question

我在名为：navigation.html的文件中将此示例放在根目录下的文件夹中：IMPORTS

<!-- Navigation -->
<div class="navbar-inner">
    <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- This is the section that doesn't work -->
        <a class="brand" href="#" data-target=".pe-container">The Book Cover</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li>
                    <a href="#" data-target=".section-about">About</a>
                </li>
                <li class="divider-vertical"></li>
                <li>
                    <a href="#" data-target=".section-books">Books</a>
                </li>
                <li class="divider-vertical"></li>
                <li>
                    <a href="#" data-target=".section-blog">Blog</a>
                </li>
                <li class="divider-vertical"></li>
                <li>
                    <a href="#" data-target=".section-contact">Contact</a>
                </li>
                <li class="navigation-right"><a href="#" title="Follow us on Twitter" target="_blank"><i class="sprite sprite-twitter"></i></a></li>
                <li class="navigation-right"><a href="#" title="Follow us on Facebook" target="_blank" class="facebook"><i class="sprite sprite-facebook"></i></a></li>
                <li class="navigation-right"><a href="#" title="Follow us on Google+" target="_blank" class="google"><i class="sprite sprite-google"></i></a></li>
            </ul>

        </div>
    </div>
</div>

然后在索引页面中我有：

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Load the Metatag Files Partial -->
        <link rel="import" href="partials/metatags.html" />
        <!-- Load the CSS Files Partial -->
        <link rel="import" href="partials/css-files.html" />
        <!-- Load the JS Files Partial -->
        <link rel="import" href="partials/js-files.html" />
        <title>Title Goes here/title>
    </head>
    <body id="page">
        <div id="container" class="contain">
            <!-- Navigation -->
            <div id="navBarMain" class="navbar navbar-inverse navbar-fixed-top"></div>
            <!-- End Navigation -->
        </div>
    </body>
 </html>

最后加载div的JQuery ......

// JQUery Fancy Box
$(document).ready(function() {

    //Load Imports
    //Navigation
    $("#navBarMain").load("imports/navigation.html");

    //This is the menu system
    $(function() {
        $('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
            $('html, body').animate({
                scrollTop: $($(this).attr('data-target')).offset().top - 50
            }, 500);
        });
    });
});

问题是，当我将“navigation.html”文件放回到索引页面上的div中时，页面顶部的菜单会起作用。但是，当我按原样加载“navigation.html”页面时，菜单点击事件不执行任何操作。我知道这是一个错误的电话，所以如果你能提供帮助，我将不胜感激。注意：即使有断点，控制台中也没有Javascript错误，没有任何反应。代码LOADS最初并在断点处停止，但是当我点击菜单时，没有，nada，ziltch ....

Answer 1

尝试在.load的回调函数中附加事件：

$(function() {
    $("#navBarMain").load("imports/navigation.html", function() {
        $('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
            $('html, body').animate({
                scrollTop: $($(this).attr('data-target')).offset().top - 50
            }, 500);
        });
    });
});

单击事件不使用JQuery导入文件

1 个答案: