jQuery：.load（）已加载页面内的页面

我使用.load（）加载菜单，效果很好。但我似乎无法以相同的方式从此预加载菜单加载子菜单。jQuery：.load（）已加载页面内的页面

这里是我的菜单：

<!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 &amp; 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>

这里是loader.js：

$(document).ready(function(){ 
    // load index page when the page loads 
    $("#main").load("illustration.html #aacc"); 
    $("#boutons").load("boutons.html #illustrations"); 
    $("#about").click(function(){ 
     $("#main").load("about.html"); 
    }); 
    $("#illustration").click(function(){ 
     $("#main").load("illustration.html #aacc"); 
     $("#boutons").load("boutons.html #illustrations"); 
    }); 
    $("#graphic").click(function(){ 
     $("#main").load("graphic.html #navet"); 
     $("#boutons").load("boutons.html #graphic"); 
    });  
    $("#contact").click(function(){ 
     $("#main").load("contact.html"); 
    }); 
$("#img1").click(function(){ 
    $("#main").load("illustration.html #aacc"); 
}); 
$("#img2").click(function(){ 
    $("#main").load("illustration.html #navet"); 
}); 
    $("#lol").click(function(){ 
     alert('you clicked me!'); 
    }); 
});

这里是从菜单中加载的子菜单（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>

这里是我想从图片加载的内容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>

我为测试做了“哈哈”，它不起作用。什么都没发生。

在此先感谢您的帮助:)

来源

2013-02-21 user2094538

尝试使用ajax加载子菜单... – ravisoni 2013-02-21 08:40:48

你应该后绑定事件节点已经在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"); }); } );

另一种方式（清洁恕我直言）是为了委托事件就是从这里起步，从来没有一个节点离开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"); });

有关的更多详情功能，去检查jQuery doc。

来源

2013-02-21 08:50:47 LeGEC

我相信事件代表团是你正在寻找。

取决于您的JQuery版本，您可能需要使用live或on而不是click。

来源

2013-02-21 08:55:01 andri

jQuery：.load（）已加载页面内的页面

回答

相关问题