将事件绑定到使用jQuery Load加载的内容

Question

我正在创建一个原型应用程序。 我想在html文件上模板化页眉和页脚。 我正在使用jQuery load加载这些。

在我的索引文件，我有这个在我的第一部分body ：

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

我通过一个名为includes.js的文档包含在我的head / script标签中的header.js之前。 这是includes.js，如下所示：

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

这是我的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>test@gmail.com</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>

还有我的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");
    });

});

我的问题是事件处理程序未绑定到.sign-in-button 。 我本来以为，因为我用jQuery的.on这样的工作。 我不知道。 我要去哪里错了？

Answer 1

jQuery的加载具有callback函数 ...

尝试这个：

$("#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
});

您也可以使用.toggleClass()代替使用单独的行来添加或删除类名。

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

Answer 2

当您准备好在DOM上加载html时，所有的javascript文件均已加载，并且header.html也在此后加载。 因此，您的header.js无法使用$(".search-toggle").on("click", function () {定位元素。在这里，您必须使用$(document).on("click",".search-toggle", function () {