CODEWITHSUNDEEP
javascriptjqueryhtml
Peter The Angular Dude
Peter The Angular Dude

Reputation: 1188

Click event not working with import of file using JQuery

I have this example in a file called: navigation.html in a folder off the root called: 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>

Then in the index page I have this:

<!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>

And finally the JQuery that loads the div...

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

The problem is, when I place the "navigation.html" file BACK into the div on the index page, the menu at the top of page works. BUT, when I load the "navigation.html" page as is, the menu click event does nothing. I know there's a call that's wrong so if you could help, it would be greatly appreciated. OF NOTE: There are NO Javascript errors in the console even with breakpoints, nothing happens. The code LOADS initially and stops at the breakpoint, but when I click on the menu, nothing, nada, ziltch....

Upvotes: 0

Views: 386

Answers (1)

Stryner
Stryner

Reputation: 7318

Try attaching the events in the callback function of .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);
        });
    });
});

Upvotes: 1

Related Questions