jQuery load () a href ссылки загружены в div, не взаимодействуя с моей функцией, но функция работает на начальной странице - PullRequest
Новая
       13

jQuery load () a href ссылки загружены в div, не взаимодействуя с моей функцией, но функция работает на начальной странице

2 голосов
/ 08 февраля 2020

Я пытаюсь немного обновить свой личный веб-сайт, используя немного динамической c загрузки страницы, используя jquery. Я создал динамическое главное меню c, которое загружает подменю и нижний раздел с содержимым в зависимости от того, что вы нажимаете. Главное меню прекрасно работает с кодом ниже и загружает подменю и нижнюю часть с правильным содержимым, если оно было запущено с использованием исходного кода index. html.

Однако моя проблема в том, что ссылки href подменю, которые загружаются в левый div подменю, не выполняют свое содержимое в div содержимого. Только подменю, загруженные с индексом. 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>

облако. html

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

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

Вы можете использовать функцию обратного вызова для привязки после динамического c загрузки 

function bindMenu() {
  $(this).find('.menu ul li a').on('click', function () {
    //...
  }
}
$("#menu").load(i+" #menu > *", bindMenu);
bindMenu.call($("#header"));
0 голосов
/ 10 февраля 2020

Я нашел ответ, скрытый в деталях о том, какие функции взаимодействуют с 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>
...