jQuery.load(）无法在jQueryload(）加载的另一个内容中工作

jQuery .load() not working inside another loaded content by jQuery load()

本文关键字：另一个 工作 jQueryload load jQuery 加载      更新时间：2023-09-26

我正在使用jQuery加载函数在div中加载网站的页面。当我点击顶部导航时，所有页面都加载良好。但是我有子页面链接，它们位于加载的内容中，当我点击它时，它是单独加载的。这是我的密码。

<ul class="top-navigation">
<li><a class="page-link" href="page1.html">Link1</a></li>
<li><a class="page-link" href="page2.html">Link2</a></li>
<li><a class="page-link" href="page3.html">Link3</a></li>
</ul>
<div class="page-content"></div>
<script>
$(window).load(function(){
$(".page-link").click(function(){
            var page_link = $(this).attr("href");
    $('#page-content').fadeOut('slow', function(){
            $('#page-content').load(page_link, function(){
            $('#page-content').fadeIn('slow');
        });
});
</script>

page1.html:的内容

some page contents
<a class="page-link" href="sub-page1.html">Sub page</a>

我甚至尝试使用$.getScript()加载主js，但没有成功。如有任何帮助，我们将不胜感激。

您的问题是，当您绑定这些元素时，它们并不存在于DOM中。更改绑定到元素的方式。

$(document).on('click', ".page-link", function(){...

这将绑定到页面上现有的以及新创建的元素。

希望这对你有帮助。

好的，现在用这个替换

<a class="page-link" href="javascript:void(0)" data-href="sub-page1.html">Sub page</a>
<script>
$(document).ready(function(){
    $(".page-link").click(function(){
        var page_link = $(this).attr("data-href");
        $('#page-content').load(page_link);
    });
});
</script>

试试这个

<a class="page-link" href="javascript:void(0)" data-href="sub-page1.html">Sub page</a>
<script>
    $(document).ready(function(){
        $(".page-link").click(function(){
            var page_link = $(this).attr("data-href");
            $('#page-content').fadeOut('slow', function(){
                $('#page-content').load(page_link, function(){
                    $('#page-content').fadeIn('slow');
                });
            });
       });
    });
</script>

试试这个

在主页中：

<script>
$(".page-link").click(function(){
        var page_link = $(this).attr("href");
        $('#page-content').fadeOut('slow', function(){
            $('#page-content').load(page_link, function(){
            $('#page-content').fadeIn('slow');
});
</script>

在子页面中：

<a class="page-link2" href="javascript:void(0);" loc="sub-page1.html">Sub page</a>
<script>
$(".page-link2").click(function(){
        var page_link = $(this).attr("loc");
        $('#page-content').fadeOut('slow', function(){
                $('#page-content').html("");
                $('#page-content').load(page_link, function(){
                        $('#page-content').fadeIn('slow');
                });
        });
});
</script>
相关文章：