jQuery load() 加载到 div 的 href 链接不与我的函数交互，但该函数在初始页面上有效

Question

我正在尝试通过 jquery 使用一些动态页面加载来更新我的个人网站。我制作了一个动态主菜单，该菜单加载子菜单和底部部分 div，其内容取决于您单击的内容。只要主菜单使用原始 index.html 代码启动，主菜单就可以与下面的代码配合使用并加载具有正确内容的子菜单和底部部分。

但是，我的问题是加载到左侧子菜单 div 中的子菜单 href 链接不会在内容 div 中执行它们的内容。只有使用 index.html 加载的子菜单才能正常运行。

当新的 div 加载到位时，我是否必须重新应用我的脚本或其他东西？

我的代码似乎只在初始页面上有效。我一直在梳理关于该做什么的各种示例，但我正在努力查看有多少示例适用于我正在尝试做的事情。我是 python 人，请原谅我的 javascript/jquery 无知。

我错过了什么吗？我只是想获取加载的子菜单，以实际允许用户将适当的内容加载到底部。

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

正文中：

 <script>
      $("#header .menu ul li a").on("click", function(){
        i=$(this).data("value")
        $("#menu").load(i+" #menu > *");
        $("#bottom_section").load(i+" #bottom_section > *");
        $("#label").load(i+" #label > *");
      });
      $("#body_container .left_container ul li a").on("click", function(){
        i=$(this).data("value")
        $("#bottom_section").load(i+" #bottom_section > *");
        $("#label").load(i+" #label > *");
      });
    </script>

css:

#main{ float:left; width:100%;}

#wrapper{margin:0 auto; width:986px;}

#header{float:left; width:946px; padding:0 20px;}
#header .top_section{float:left; height:200px; width:100%; background-image: url("../images/header_bg.png");}
#header .top_section .logo{float:left; width:285px; padding:30px 0 0 20px;}
#header .top_section .logo a{float:left; width:auto;}
#header .top_section .logo a img{float:left;}
#header .top_section .logo span{
    float:left;
    width:100%;
    font-size:18px;
    line-height:15px;
    color:#e6f5ff;
    text-transform:uppercase;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#header .top_section .logo strong{
    float:left;
    width:100%;
    font-size:24px;
    line-height:15px;
    color:#33adff;
    padding:10px 0;
    text-align:left;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
}
#header .top_section img{display: inline;  float:right; max-height:200px; width:auto;}

#header .menu{float:left; width:100%; height:32px; background-color:#33adff;}
#header .menu ul{float:left; width:auto; list-style:none;}
#header .menu ul li{float:left; width:auto; padding:0 45px; display:inline; font-size:15px; line-height:2px; text-shadow:1px 1px 1px #580202; text-transform:uppercase;}
#header .menu ul li a{float:left; width:auto; color:#fff; text-decoration:none;}
#header .menu ul li a:hover{text-decoration:underline;}

#body_container{display: table; width:902px; margin: 0 auto; border:2px solid lightgrey; }
#body_container .left_container{float:left; margin: 10 auto; padding:0 10px; border:2px solid black; border-color:#33adff; width:20%; height:488px;}
#body_container .left_container img{display:block; width: 75%; padding-left:20px;}
#body_container .left_container ul{float:left; width:auto; list-style:none;}
#body_container .left_container ul li{display:block; padding-left:20px;}
#body_container .left_container ul li a{float:left; width:auto; color:#33adff; text-decoration:none;}
#body_container .left_container ul li a:hover{text-decoration:underline;}
#body_container .left_container h3{display:block; text-align: center; float:left; width:100%;font-size:22px;color:#33adff;font-style:normal;font-family:Arial, Helvetica, sans-serif;font-weight: bold;}

#body_container .right_container{float:right; padding:0 10px; width:70%;}
#body_container .right_container .top_section{display:block; height:30px;}
#body_container .right_container .bottom_section{display:block;}
#body_container .right_container .top_section img{float:left;}
#body_container .right_container .top_section h4{
    text-align:center;
    font-size:18px;
    line-height:10px;
    color:#33adff;
}
#body_container .right_container .bottom_section h3{
    float:left;
    width:100%;
    font-size:22px;
    color:#33adff;
    font-style:normal;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
}
#body_container .right_container .bottom_section article{float:left;width:auto; padding:0 10px 0 10px;}
#body_container .right_container .bottom_section h5{float:left; width:auto; padding:0 0 0 20px;}
#body_container .right_container .bottom_section img{display:inline; padding-left:20px; padding-top:20px;}
#body_container .right_container .bottom_section h6{
    float:left;
    width:100%;
    font-size:17px;
    color:#33adff;
    font-style:normal;
    font-family:Arial, Helvetica, sans-serif;
    padding:8px 0;
    font-weight: bold;
}

#footer{float:left; width:946px; padding:0 20px;}
#footer .top_section{float:left; width:100%; height:32px; background-color:#33adff;}
#footer .top_section span{color:white; float:left; padding-top:4px; padding-left: 20px;}

#footer .bottom_section{float:left; width:100%; background-color:#000000}
#footer .bottom_section span{color:white; float:right; padding: 30px 20px 10px 10px;}
.darkgrey_div{display: inherit; border:2px solid darkgrey; width: 98%; height: 98%;}
.grey_div{display: inherit; border:2px solid grey; padding:0 20px; width: 894px; height: 98%;}


.grey_line{float:left; width:100%; height:2px; display:block; background-color:grey;}
.white_line{float:left; width:100%; height:2px; display:block; background-color:white;}
.clear{padding-bottom:15px;}

index.html:

<html><head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>Test Site</title>
<link href="common/css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
    margin-bottom: 0px;
    background-repeat: repeat;
}
-->
</style>
</head>
<body>
    <div id="main">
        <div id="wrapper">
            <div id="header">
                <div class="top_section">
                </div>
                <div class="white_line"></div>
                <div class="grey_line"></div>
                <div class="menu">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#" data-value="software.html">Software</a></li>
                    </ul>
                </div>
                <div class="grey_line"></div>
                <div class="white_line"></div>
            </div>
            <div id="body_container">
                <div class="darkgrey_div">
                    <div class="grey_div">
                        <div class="left_container">
                            <div id="menu">
                            <h3>Home Links</h3>
                            <ul>
                                <li><a href="#" data-value="about.html">About</a></li>
                            </ul>
                            </div></div>
                        <div class="right_container">
                            <div class="top_section">
                                <h4>Test Site.</h4>
                            </div>
                            <div id=bottom_section class="bottom_section">
                                <h3>Welcome</h3>
                                <article>Welcome to test site.</article>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer">
                <div class="white_line"></div>
                <div class="grey_line"></div>
                <div id="label" class="top_section">
                    <span>Main</span>
                </div>
                <div class="grey_line"></div>
                <div class="white_line"></div>
                <div class="bottom_section"><span>Test Site.</span></div>
            </div>
        </div>
    </div>
    <script>
      $("#header .menu ul li a").click(function(){
        i=$(this).data("value")
        $("#menu").load(i+" #menu > *");
        $("#bottom_section").load(i+" #bottom_section > *");
        $("#label").load(i+" #label > *");
      });
      $("#body_container .left_container ul li a").click(function(){
        i=$(this).data("value")
        $("#bottom_section").load(i+" #bottom_section > *");
        $("#label").load(i+" #label > *");
      });
    </script>
</body>
</html>

about.html:

<html>
<div id="bottom_section">
<h3>About test</h3>
<article>Test article about us.</article>
</div>
<div id="label"><span>About</span></div>
</html>

software.html

<html>
<div id="menu">
<h3>Software Links</h3>
<ul>
<li><a href="#" data-value="software.html">Software</a></li>
<li><a href="#" data-value="cloud.html">Cloud</a></li>
</ul>
</div>
<div id="bottom_section">
<h3>Software</h3>
<article>Software Test page.</article>
</div>
<div id="top_section"><span>Software</span></div>
</html>

cloud.html

<html>
<div id="bottom_section">
<h3>Cloud</h3>
<article>
Stuff on Cloud stuff.
</article></div>
<div id="label"><span>Cloud</span></div>
</html>

Answer 1

我自己在有关动态加载内容的哪些功能与 DOM 交互以及哪些不交互的细节中找到了答案。 .on() 是必需的，因为它允许与 DOM 交互以动态加载内容。 .click() 不适用于动态加载内容中的 DOM。

    <script>
        $(document).on('click','#body_container .left_container #menu ul li a',function(){
                i=$(this).data("value");
                $("#bottom_section").load(i+" #bottom_section > *");
                $("#label").load(i+" #label > *");
        });
        $(document).on('click','#header .menu ul li a',function(){
                i=$(this).data("value");
                $("#menu").load(i+" #menu > *");
                $("#bottom_section").load(i+" #bottom_section > *");
                $("#label").load(i+" #label > *");
        });
    </script>

Answer 2

动态加载后可以使用回调函数进行绑定

function bindMenu() {
  $(this).find('.menu ul li a').on('click', function () {
    //...
  }
}
$("#menu").load(i+" #menu > *", bindMenu);
bindMenu.call($("#header"));

jQuery load() 加载到 div 的 href 链接不与我的函数交互，但该函数在初始页面上有效

jQuery load() a href links loaded into div not interacting with my function, but the function works on the initial page

html

jquery

load

menu

href