jQuery:.load()已加载页面中的页面
我用.load()加载菜单,效果很好。但我似乎无法以同样的方式从这个预加载菜单加载子菜单 这是我的菜单:jQuery:.load()已加载页面中的页面,jquery,load,Jquery,Load,我用.load()加载菜单,效果很好。但我似乎无法以同样的方式从这个预加载菜单加载子菜单 这是我的菜单: <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> <link rel="stylesheet" href="style.css"> <script
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="loader.js"></script>
</head>
<body>
<div id="wrapper">
<div id="menu">
<img src="images/logo.jpg" /><br>
Illustrator & Art Director
<p><br><br><br>
<a href="#" id="about">About Ātman</a><br>
<a href="#" id="illustration">Illustration</a><br>
<a href="#" id="graphic">Graphic Art</a><br>
<a href="#" id="contact">Contact</a></p>
</div>
<div id="main"></div>
<div id="boutons"></div>
</div>
</body>
下面是从菜单加载的子菜单(boutons.html):
<body>
<div id="illustrations">
<table border="0" width="200" cellpadding="1" cellspacing="1">
<tr>
<td><a href="#" id="img1"><img src="images/bouton/BI1.jpg" alt="" /></a></td>
<td><a href="#" id="img2"><img src="images/bouton/BI5.jpg" alt="" /></a></td>
<td><a href="#" id="lol">About Ātman</a></td>
</tr>
</table>
</div>
</body>
下面是我想从illustration.html加载的内容:
<body>
<div id="aacc">
<img src="images/I/AACC.jpg" alt="AACC" />
<div id="en">NO ADVERTISING EXCEPT BETC poster for open door day (concept, art direction, paper sculpture)</div>
<div id="fr">PAS DE PUB SAUF BETC affiche pour la journée porte ouverte (concept, direction artistique, sculpture en papier)</div>
</div>
<div id="navet">
<img src="images/I/navet.jpg" alt="navet" />
<div id="en">NAVET illustration for comics cover (paper sculpture)</div>
<div id="fr">NAVET illustration pour couverture de bande dessinée (sculpture en papier)</div>
</div>
</body>
除了开放日的BETC海报外,没有广告(概念、艺术指导、纸雕)
巴黎艺术博物馆(概念、方向、艺术、纸塑雕塑)
漫画封面插图(纸雕)
中堂插图倒出了班德·德西涅(纸制雕塑)
我为测试做了“lol”,但它不起作用。什么也没发生
提前感谢您的帮助:)您应该在DOM中加载节点后绑定事件,例如:
而不是
$(document).ready(function(){
$("#boutons").load("boutons.html #illustrations");
//...
//#illustrations is not loaded yet, $('#img1') and $('#img2') are empty
$("#img1").click(function(){
$("#main").load("illustration.html #aacc");
});
$("#img2").click(function(){
$("#main").load("illustration.html #navet");
});
})
你可以:
$(document).ready(function(){
$("#boutons").load("boutons.html #illustrations",
//this callback is called *after* .load() has completed
function(){
$("#img1").click(function(){
$("#main").load("illustration.html #aacc");
});
$("#img2").click(function(){
$("#main").load("illustration.html #navet");
});
}
);
另一种方法(cleaner IMHO)是从一开始就将事件委托给此处的节点,并且永远不会离开DOM:
$(document).ready(function(){
// this basically says "if any child of '#boutons' matches the '#img1'
// selector, execute this click handler"
$('#boutons').on( 'click', '#img1', function(){
//inside this handler, 'this' refers to the '#img1' item
$("#main").load("illustration.html #aacc");
});
$('#boutons').on( 'click', '#img2', function(){
$("#main").load("illustration.html #navet");
});
//...
$("#boutons").load("boutons.html #illustrations");
});
有关
on
功能的更多详细信息,请查看。我相信您正在寻找的是事件委派
根据您的JQuery版本,您可能希望使用或不使用
单击尝试使用ajax加载子菜单。。。
$(document).ready(function(){
// this basically says "if any child of '#boutons' matches the '#img1'
// selector, execute this click handler"
$('#boutons').on( 'click', '#img1', function(){
//inside this handler, 'this' refers to the '#img1' item
$("#main").load("illustration.html #aacc");
});
$('#boutons').on( 'click', '#img2', function(){
$("#main").load("illustration.html #navet");
});
//...
$("#boutons").load("boutons.html #illustrations");
});