Javascript 将事件绑定到使用jQuery加载加载的内容
我正在创建一个原型应用程序。我想在html文件上模板我的页眉和页脚。我正在使用jQuery加载加载这些 在我的索引文件中,Javascript 将事件绑定到使用jQuery加载加载的内容,javascript,jquery,html,Javascript,Jquery,Html,我正在创建一个原型应用程序。我想在html文件上模板我的页眉和页脚。我正在使用jQuery加载加载这些 在我的索引文件中,正文的第一部分有: <!--COMMON HEADER ------------- --> <header id="common-include-header" class="blade child ns"> </header> 这是my header.html: <div class="blade-
正文的第一部分有:
<!--COMMON HEADER ------------- -->
<header id="common-include-header" class="blade child ns">
</header>
这是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>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>
我的问题是,事件处理程序没有绑定到。登录按钮
。我会想,自从我在
上使用jQuery,这就行了。我想不出来。我哪里出错了?jQuery的加载有一个
试试这个:
$("#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
});
您还可以使用而不是使用单独的行来添加或删除类名
//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");
});
当您在DOM ready上加载html时,您的所有javascript文件都已加载,并且在此之后将加载header.html。因此,您的header.js无法使用$(“.search toggle”)找到元素。在(“click”,function(){
。这里您必须使用$(document)。在(“click”,“search toggle”,function(){
@MKA是对的!了解一下在index.html
上不加载所有html
的目的是什么?@guest271314因为我有大约20个具有一致页眉和页脚的文件,我正在加载它们,所以我有一个页眉和页脚的代码库-这是一个原型,稍后将被模板化到MVC框架中。试一下ng以减少在某些内容发生更改时需要更新多个标题标记的情况(它将这样做)。@MKA是的,不起作用。下面的回调应答有效。OP针对每个模板有不同的js文件。在这种情况下,您的解决方案可能没有帮助!
$("#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
});
//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");
});