jquery load（）加载到div中的href链接未与我的函数交互，但该函数在初始页面上有效

问题描述 投票：2回答：2

我正在尝试通过使用jquery进行一些动态页面加载来稍微更新我的个人网站。我已经制作了一个动态的主菜单，该菜单可以加载子菜单，并可以根据单击内容在底部div加载内容。只要使用原始index.html代码启动，主菜单就可以与下面的代码配合使用，并为子菜单和底部加载正确的内容。

但是，我的问题是加载到左侧子菜单div中的子菜单href链接未在content 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>
jquery html menu load href
2个回答
0
投票
<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>
0
投票
function bindMenu() { $(this).find('.menu ul li a').on('click', function () { //... } } $("#menu").load(i+" #menu > *", bindMenu); bindMenu.call($("#header"));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.