js load html页面消失,使用jquery的load方法加载html页面，但是html引入的js不生效

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

有一个公共的登录弹框页面需要在多个页面引用，百度后就使用了jQuery 的 load 方法。

做法：

将公共的 html 页面提取出来，放在一个独立的 HTML 文件中。

然后在需要使用的 html 页面中，使用 jQuery 的 load 方法进行引用即可。

注：提取的部分，不需要包含多余的

、等标签，只需要放置你所用到的标签即可。

用法：

具体代码如下：

//HTML部分：

//js部分：

//当前页面的js文件

$(function(){

/*公共部分：登录弹框*/

$("#login_box").load("../../template/login/login.html");

})

//引入的公共登录页面的js文件

不想看代码的可以看图：

carriage.js 文件中的部分 html 代码如下所示

login.js 文件中的 部分 js 代码如下所示：

发现问题

注：这里以 关闭按钮 (即 .layer-close-icon 元素)为例，进行了测试和调试。

代码运行后发现：登录弹框页面中所有元素的绑定事件都没有被触发。点击关闭按钮也没有反应。

控制台调试后发现：在为 $(".layer-close-icon") 注册点击事件时，根本就没有找到该元素。【如下图所示】

在控制台查看当前的 HTML 结构，发现：此时，登录框并没有被加载进来。所以，页面元素目前还不存在，当然获取不到该元素，也就不能为它注册点击事件了。【如下图所示】

后来思考了许久，也问了一下同事，得出一个结论：这与页面中 js 文件 的加载和执行顺序有关系。

页面上的js代码是HTML页面的一部分，所以js在页面装载时的执行顺序就是其引入标签的出现顺序。

标签里面的 js 代码 或者 通过 src 引入的外部 js，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。

当页面中的 DOM 元素全部加载完毕后就执行jQuery 中的 $(document).ready(function(){})方法，或简写为：$(function(){})。

如果在执行 .ready() 方法之前有 js 代码存在，那么会先执行 ready()方法 之前的 js 代码，然后再执行 .ready()方法。

解决问题

然后通过百度搜了一段时间，突然发现一个貌似可行的解决方法： jQuery 中的 $.getScript() 方法。

为什么说貌似可行呢？一是没见过，二是没用过，三是感觉应该没问题。

经过测试，发现确实可行。具体代码如下图所示：

jQuery.getScript() 函数用于动态加载JS文件，并在全局作用域下执行文件中的JS代码。

请注意： 该函数是通过异步方式加载数据的。不要直接在 jQuery.getScript() 执行后直接调用该 js 文件中的变量或函数。

结束语

至此，问题就已经被解决了。

后来同事又给我提供了一个新的思路：

加载完 HTML 文件之后，使用 js 动态创建一个 script 标签，然后通过它的 src 属性，指向你所要引入的js文件的路径。

而且load方法可以使用一个回调函数作为第二个参数，所以我们可以在回调函数中动态的将 js 文件加载进来。

具体代码如下所示：【亲测可行】

$(function(){

/*公共部分：登录弹框*/

$("#login_box").load("../../template/login/login.html",function(){

var sc = document.createElement("script");

sc.src= "../../template/login/login.js";

$("body").append(sc);

});

/* $.getScript("../../template/login/login.js",function(){

// alert("载入成功！");

}); */

})

参考资料：