jQuery .load() 在 jQuery load() 加载的另一个内容中不起作用答案

【问题标题】：jQuery .load() not working inside another loaded content by jQuery load()jQuery .load() 在 jQuery load() 加载的另一个内容中不起作用
【发布时间】：2014-08-29 23:48:05
【问题描述】：

我正在使用 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，但没有任何效果。任何帮助将不胜感激。

【问题讨论】：

查看事件委托learn.jquery.com/events/event-delegation，您的选择器函数将更改为$(document).on('click', ".page-link", function(){...
不。它不工作。我也试过.bind() 都不起作用。
这会起作用，我第一次尝试时错过了一些东西。谢谢罗！

标签： javascript jquery html

【解决方案1】：

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

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

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

希望这对您有所帮助。

【讨论】：

你很棒xCNPx！我上次尝试使用绑定方法时错过了一些东西。非常感谢，它有效。

【解决方案2】：

好的，现在用这个替换

<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>

【讨论】：

感谢您的帮助。我看不出与第一个代码有任何区别，但两者都不起作用。
对不起，Luigi 我是新手 :)
@devdarsh 我认为您尝试加载的页面返回 404 错误（未找到）检查浏览器中的 console.log 并告诉我您看到了什么或尝试定义完整的 url，如 http//localhost/aaaa/bbb/ccc/sub-page1.html
页面正在加载，但不在 div#page-content 内，当我使用 href="http://localhost/test19/sub-page1.html" 时，它正在新页面中加载
@user3349436 没问题，请记住这一点，以免将来投反对票。

【解决方案3】：

试试这个

<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>

【讨论】：

【解决方案4】：

试试这个

在主页：

<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>

【讨论】：