用jQuery的load方法动态加载页面，以及脚本问题

2023-08-30 04:28| 来源: 网络整理| 查看: 265

一、了解load方法

load(url, [data], [callback]) 概述载入远程 HTML 文件代码并插入至 DOM 中。

默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。

参数 url,[data,[callback]]String,Map/String,CallbackV1.0

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

二、页面结构

我的页面分两个idv，左div和右div，业务场景需求是：left初始化加载页面，并且在right中点击某button元素时，left能无刷新地再次加载页面，即动态加载页面到左边div中。

三、javaScript部分 $(document).ready(function(){ //绑定btn点击事件 $('#btn').on('click', function(){ refreshPage(); }); }); /* 加载页面 */ function refreshPage(){ //提交到后台的路径，type是需要传递的参数 var url = '../XXX/edit.do?type=XXX'; $('#left').load(url ,function(){ alert('加载成功！'); }); } 四、load后的页面，js失效的问题

运行上述代码后，发现页面虽然成功载入left了，样式也正确，但是js全都失效。

//写在这里的脚本也都不起作用

原因：load方法加载的外部文件会把Script部分删除掉解决办法：在页面加载完毕后再引入js文件，或绑定事件

$(document).ready(function(){ //绑定btn点击事件 $('#btn').on('click', function(){ refreshPage(); }); }); /* 加载页面 */ function refreshPage(){ //提交到后台的路径，type是需要传递的参数 var url = '../XXX/edit.do?type=XXX'; $('#left').load(url ,function(){ var sc = document.createElement("script"); sc.src= "../XXX/edit.js"; $("body").append(sc); }); }

不建议用jQuery.getScript方法引入，因为这个方法引入的js中声明的变量是全局的，容易引出其他问题。

五、load后的页面，重复绑定事件的问题

我在…/XXX/edit.js 中，定义有left中元素的绑定事件：

//绑定btn点击事件 $('#save').on('click', function(){ alert('保存'); });

允许上述代码后，发现第二次点击btn按钮加载页面，点击save按钮就连续弹出“保存”的提示窗口两次，页面加载多少次，alert(‘保存’)就执行多少次，这是因为save按钮被重复绑定了。解决办法：刷新之前，先解除事件所有绑定。

$(document).ready(function(){ //绑定btn点击事件 $('#btn').on('click', function(){ refreshPage(); }); }); /* 加载页面 */ function refreshPage(){ //刷新之前，先解除事件所有绑定，on事件对应的解除用off $('#save').off(); //提交到后台的路径，type是需要传递的参数 var url = '../XXX/edit.do?type=XXX'; $('#left').load(url ,function(){ var sc = document.createElement("script"); sc.src= "../XXX/edit.js"; $("body").append(sc); }); }

【本文地址】

公司简介

联系我们