个人中心
gpt4 book ai didi

jQuery:.load() 已加载页面中的页面

转载 作者：行者123 更新时间：2023-12-01 04:15:42 24 4
gpt4 key购买 nike

我使用 .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>

这是我想要从 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>

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

预先感谢您的帮助:)

最佳答案

您应该在节点加载到 DOM 中之后绑定(bind)事件，例如:

而不是

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

另一种方法(更干净的恕我直言)是将事件委托(delegate)给从一开始就存在的节点，并且永远不会离开 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 doc .

关于jQuery:.load() 已加载页面中的页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14997775/

24 4 0
文章推荐： jQuery 淡入和淡出循环回到 :first sibling
文章推荐： java - 带有队列的 map
文章推荐： java - 如何使用一个托管 bean 执行两种方法并将数据保存在变量中？
文章推荐： jquery - 如何启动滑动事件 "manually"？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com