javascript - 使用 Jquery 的动态页面 .load 冲突

Question

我正在尝试创建一个单页网站，将页面加载到 id 为 #content 的 div，但是有时我的表单元素会变得困惑，例如日期选择器和自动完成功能无法呈现。所以我怀疑有很多脚本需要加载，这会导致冲突，因为我的所有页面都有源链接。

我的第一个调整是从子页面中删除所有源链接并将其移至主页。但是当使用 jquery .load 加载子页面时，我的控制台上出现一堆错误，例如自动完成不是函数和同步 XMLHttpRequest。有什么建议可以解决这个问题吗？

//My code to load pages.

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

        var page = $(this).data('link');

        $("#content").html("<img src='img/142.gif' width='150' />").load(page);

        //console.log('Click function was called');

});

Answer 1

出现错误，因为 javascript 源文件在之后加载，但您的 javascript 代码先执行。您可以使用 iframe 元素，为了动态加载新页面，更改 src，然后重新加载 iframe。

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

    var page = $(this).data('link');
    var iFrame = $('iframe');
    iFrame.html("<img src='img/142.gif' width='150' />");
    iFrame.load(page); 

});