Question

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

Answer 1

好了现在只需用这个替换

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

Answer 2

您的问题是绑定它们时DOM中没有这些元素。更改绑定元素的方式。

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

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

希望这会对你有所帮助。

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

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

jQuery .load（）在jQuery load（）内的另一个加载内容中不起作用

4 个答案: