Binding an event to content loaded using jQuery Load

Question

I'm creating a prototype application. I wanted to template my header and footer over html files. I'm loading these in using jQuery load.

In my index file I have this in the first part of my body:

<!--COMMON HEADER ------------- -->
        <header id="common-include-header" class="blade child ns">
        </header>

I'm including via a document called includes.js which is listed before header.js in my head/script tags. Here is the includes.js like so:

$(document).ready(function () {
    $("#common-include-header").load("includes/header.html");
    $("#common-include-footer").load("includes/footer.html");
});

Here is my header.html:

<div class="blade-content flexr xc sb">

    <img src="img/logo100.svg"></img>

    <div class="child g">
        <form class="search-form flexr jc">
            <input class="location" value="Auckland" />
            <input class="context" placeholder="Find something" />
            <button class="child ns"><i class="fa fa-search"></i></button>
        </form>
    </div>

    <button class="search-toggle"><i class="fa fa-search"></i></button>

    <div class="child ns">
        <button class="sign-in-button pill outline pink">Sign in</button>

        <button class="user-signed-in flexr xc hide">
            <p>[email protected]</p>
            <img src="img/av.png"></img>
            <i class="fa fa-chevron-down"></i>
        </button>
    </div>

    <nav class="signed-in-nav flexc">
        <button type="button" class="dropdown-menu child ns">Favourites</button>
        <button type="button" class="dropdown-menu child ns">Reviews</button>
        <button type="button" class="dropdown-menu child ns">Businesses</button>
        <button type="button" class="dropdown-menu sign-out child ns">Sign out</button>
    </nav>

</div>

And my header.js

$(document).ready(function () {

    //hide/show mobile search
    $(".search-toggle").on("click", function () {
        if ($(".toggle-search").hasClass('open')) {
            $(".toggle-search").removeClass("open");
        } else {
            $(".toggle-search").addClass("open");
        };
    });

    //hide/show sign in
    $(".sign-in-button").on("click", function () {
        $(".sign-in-button").addClass("hide");
        $(".user-signed-in").removeClass("hide");
    });

    //hide/show user menu
    $(".user-signed-in").on("click", function () {
        if ($(".signed-in-nav").hasClass("open")) {
            $(".signed-in-nav").removeClass("open");
            $(".user-signed-in").removeClass("open");
        } else {
            $(".signed-in-nav").addClass("open");
            $(".user-signed-in").addClass("open");
        };
    });

    //sign out
    $("button.sign-out").on("click", function () {
        $(".signed-in-nav").removeClass("open");
        $(".user-signed-in").removeClass("open");
        $(".user-signed-in").addClass("hide");
        $(".sign-in-button").removeClass("hide");
    });

});

My problem is that the event handlers aren't binding to .sign-in-button. I would have thought since I used jQuery .on this would work. I can't figure it out. Where am I going wrong?

@guest271314 because I have about 20 files with consistent headers and footers, I'm loading them in so I have one code base for the header and footer - it's a prototype that will be templated into an MVC framework later. Just trying to cut down on needing to update multiple header tags if something changes (which it will). — lloydphillips
– lloydphillips, Commented Dec 7, 2015 at 4:50

Mottie · Accepted Answer · 2015-12-07 04:45:28Z

2

jQuery's load has a callback function...

Try this:

$("#common-include-header").load("includes/header.html", function(){
  // bind to header code here
});
$("#common-include-footer").load("includes/footer.html", function(){
  // bind to any footer code here
});

You can also use .toggleClass() instead of having separate lines to add or remove class names.

//hide/show mobile search
$(".search-toggle").on("click", function () {
    var isOpen = $(".toggle-search").hasClass('open');
    $(".toggle-search").toggleClass("open", !isOpen);
});

//hide/show sign in
$(".sign-in-button").on("click", function () {
    $(".sign-in-button").addClass("hide");
    $(".user-signed-in").removeClass("hide");
});

//hide/show user menu
$(".user-signed-in").on("click", function () {
    var isOpen = $(".signed-in-nav").hasClass("open");
    $(".signed-in-nav").toggleClass("open", !isOpen);
    $(".user-signed-in").toggleClass("open", !isOpen);
});

//sign out
$("button.sign-out").on("click", function () {
    $(".signed-in-nav, .user-signed-in").removeClass("open");
    $(".user-signed-in").addClass("hide");
    $(".sign-in-button").removeClass("hide");
});

answered Dec 7, 2015 at 4:45

Mottie

86.8k30 gold badges132 silver badges248 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rayon Over a year ago

OP has different js files for each template..Your solution may not be helpful in that case!

Harsh Makani · Accepted Answer · 2015-12-07 04:45:44Z

0

As you are loading your html on DOM ready, all your javascript files are already loaded and your header.html is being loaded after that. So your header.js can not locate the element using $(".search-toggle").on("click", function () { . Here you have to use $(document).on("click",".search-toggle", function () {

answered Dec 7, 2015 at 4:45

Harsh Makani

7615 silver badges11 bronze badges

Collectives™ on Stack Overflow

Binding an event to content loaded using jQuery Load

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related