Jquery方法load之后导致js失效解决方法

Jquery方法load之后导致js失效解决方法

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月11日 10:41:36 星期五

http://fanshuyao.iteye.com/

 

现在有两个页面,一个是a.html,一个是feeds.html,现在在a.html页面引入js文件,其中js文件有一个方法,方法的内容是在a.html页面id为feeds的div加载feeds.htlm页面的内容,如下

$("#feeds").load("feeds.html");

 

feeds.htlm页面的某个内容

<li>
			<a class="abtnSupportListContent" href="javascript:void(0);"  data-jsp="responsibility.jsp">
				客户使用燃气的权利、责任和义务,燃气供应的责任和义务。
			</a>
			<p class="support-list-content"></p>
		</li>

 

但是,加载进来后,a.html的页面的js方法(绑定abtnSupportListContent的click方法)没有起作用

$(".abtnSupportListContent").click(function(){
  //……
);

 

 

解决方法:

不使用load方法,改成get方法,将得到的data放进div中,然后再下面再声明click事件

(使用load方法,然后在后面绑定也是不行的,只能使用get,post应该也行。)

 

$("#supportList").html(data);
$(".abtnSupportListContent").click(function(){
  //……
);

 

注意的是:click事件不能放在get方法外面,试了一下,也不起作用。

 

 

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年9月11日 10:41:36 星期五

http://fanshuyao.iteye.com/

jQuery 的 `load()` 方法用于异步加载外部 HTML 并插入到目标元素中,如果直接加载可能会导致样式表(CSS)和脚本(JavaScript)文件未正确关联。为了解决这个问题,可以采取以下几种策略: 1. **修改 `src` 或 `href`**: 当 `load()` 加载 HTML 时,确保将 CSS 和 JavaScript 文件的 `src` 或 `href` 属性也一起包含在内。例如,在 `load()` 函数内部,你可以添加类似这样的代码: ```javascript $('#target').load('page.html', function() { $('head').append('<link rel="stylesheet" type="text/css" href="styles.css">'); $('body').append('<script src="script.js"></script>'); }); ``` 2. **使用 `async` 和 `defer` 标签**: 对于外部 JS 文件,可以在 `script` 标签中设置 `async` 或 `defer`属性,以确保它们按需下载而不是阻塞页面加载: ```html <script async src="script.js"></script> ``` 3. **延迟样式加载**: 使用现代浏览器支持的 `link[rel=preload]` 或者 `link[rel=stylesheet][async]` 来延迟 CSS 文件的加载。 4. **使用 `$.getScript()` 或 `$.ajax()` 获取 JS**: 如果需要单独处理脚本加载,可以使用 jQuery 的 `$.getScript()` 或 `$.ajax({dataType: 'script'})` 方法,这样能更好地控制脚本加载。 5. **HTML5 History API 和 PushState**: 对于更复杂的单页应用,可以考虑使用 History API 管理 URL 变化,并通过事件监听器来更新内容和资源引用。 总之,确保链接的路径正确,采用异步加载机制,并根据需求调整加载顺序和时机,通常能解决 CSS 和 JS 文件加载失效的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值