將事件綁定到使用jQuery加載的內容加載

Question

我創建了一個原型應用程序。我想通過html文件模板我的頁眉和頁腳。我使用jQuery加載加載這些。

在我的索引文件，我有這個在我body第一部分：

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

我包括通過其header.js之前在我的腦海/ script標籤中列出的文件名爲includes.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"); 
    }); 

}); 

我的問題是，事件處理程序AREN不綁定到.sign-in-button。我會想，因爲我用jQuery .on這會工作。我無法弄清楚。我哪裏錯了？

Answer 1

jQuery的負載具有callback function ...

試試這個：

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

當你加載你的HTML DOM準備好了，你所有的JavaScript文件已加載後，你的header.html中被加載。所以你的header.js不能使用$(".search-toggle").on("click", function() {找到元素。在這裏你必須使用$(document).on("click",".search-toggle", function() {