jquery - 使用 jQuery 加载动态加载的内容会清除现有的 html

Question

目前，我正在尝试创建一个设置，将页面内容加载到主目录中，以避免必须为每个链接刷新页面。

我对每个单击的链接使用 jQuery 加载，如下所示，以便将链接加载到#main. （显然，完成后不会是所有链接。）

直接访问的页面可以正常工作，但是如果您尝试使用此加载链接，那么它将正确加载内容，但仅在视图源中显示加载的 html，我在这里做错了吗？

$("body").on("click", "a", function(){

    $("#footer, #main").fadeOut('fast');

    $("#main").load($(this).attr("href"), function(){

        $("#main, #footer").fadeIn('slow');

    });

    return false
});

Answer 1

导致此问题的问题.load()是您包含的文件包含<script></script>标签。

这些会干扰 Javascript，并且无法应对导致页面出错。

要停止该问题，您必须<script></script>从加载的文件中删除标签。

Answer 2

你淡出主要，并没有再次淡入......
使用这个：

$("body").on("click", "a", function(){    
    $("#footer, #main").fadeOut('fast');    
    $("#main").load($(this).attr("href"), function(){    
        $("#main").fadeIn('slow'); // <======================
        //$(this).fadeIn('slow'); this isn't the main object!
        $("#footer").fadeIn('slow');    
    });    

    return false
});

this回调内部不是 DOM 元素！！！