问题描述
请先看代码：A页面的代码:<html> <head> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="ab.js"></script> </head> <body><input type="button" value="点我" id="a"><div id="cont"></div></body></html>ad.js文件代码:$(function(){ alert("A页面"); $("#a").click(function(){ alert(加载B页面); $.load("B.jsp"); }); $("#b").click(function(){ alert("点我有反映"); });});B页面的代码： <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="ab.js"></script><h1>我是B页面</h1><input type="button" value="点不动" id="b">问题1：进入A页面的时候执行了alert("A页面")（这是正常的）; 然后第一次点击 A页面的按钮，执行了一次｛alert("A页面");alert(加载B页面);｝，B页面显示成功，B页面的按钮也能点。然后第二次点击A页面的按钮，｛alert("A页面");alert(加载B页面);｝连续执行了2次，B页面也加载了。第三次点击A页面的按钮，｛alert("A页面");alert(加载B页面);｝执行了4次，。。。往后B页面的加载就会越来越慢。感觉好像点击事件在不断的累积一样。求解？问题2：我针对上面的问题，我把B页面的JS加载给去掉，或者把B页面的按钮点击事件响应写到另一个JS文件中去。这样的话我在B页面的按钮就点不动了，我的目的是点击A页面的按钮，能加载B页面进来（不刷新A页面），同时B页面的按钮也同样可以执行点击事件（但是不要出现问题1的现象）。真心求解 啊
解决方案
1.A.html]<html><head><script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script type="text/javascript" src="ab.js"></script></head><body><input type="button" value="点我" id="a"><div id="cont"></div></body></html>2.ab.js$(document).ready(function(){alert("A页面");$("#a").click(function() {alert('加载B页面');$('#cont').load("B.html");});});3.B.html<h1>this is b</h1><input type="button" value="" id="b"><script type="text/javascript">$("#b").click(function() {alert("123");});</script>不过不知道为什么,加载进来的B中,如果有中文会是乱码,
解决方案二：
补充一下，对于div里面加载子页面和类似的情况，因为整体来说，还是一个页面，所以像<script type="text/javascript" src="js/jquery-1.7.2.js"></script> 这种，子页面里面不要再写了，否则有时候会出错。还有css文件也一样，都不要重复。
解决方案三：
b.jsp中的js引用去掉。 $("#b").click(function(){ alert("点我有反映"); }); 这部分代码直接写在b.jsp里面，或者卸载load的回调函数里面。等b.jsp加载完成了再执行绑定，否则还么加载，是找不到$("#b")的，也就绑定不了。