头疼了，请教各位一个ie兼容性 的问题
JSP：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="imgJSP.js"></script>
<title>123</title>
<link href="imgJSP.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="imgDiv"><img id="imgImg"/></div>
<div id="tipDiv"></div>
</body>
</html>
imgJSP.css：
#imgDiv {
position:absolute;
width:550px;
height:400px;
z-index:1;
border-width: 1px;
border-style: solid;
border-color: #0CF;
top:0px;
left:0px;
}
#tipDiv {
position:absolute;
width:550px;
height:20px;
z-index:1;
top: 400px;
left:0px;
border-width: 1px;
border-style: solid;
border-color: #0CF;
}
#imgImg {
position:absolute;
width:550px;
height:400px;
z-index:2;
top:0px;
left:0px;
}
imgJSP.js:
//存放图片
var imgsrc= new Array();
//图片数量
var imgnum=0;
//当前图片位置
var imgnow=0;
//每个浮动层的宽度
var fwidth =0;
//最后一个浮动层的宽度
var restwidth
//时间对象
var time
//示例
imgsrc[0]="img/201201.jpg";
imgsrc[1]="img/201202.jpg";
imgsrc[2]="img/201203.jpg";
imgsrc[3]="img/201204.jpg";
imgsrc[4]="img/201205.jpg";
imgsrc[5]="img/201206.jpg";
imgsrc[6]="img/201207.jpg";
jQuery(document).ready(function(){
//图片预加载
var arr = new Array();
for(var i=0; i<imgsrc.length; i++) {
arr[i] = new Image();
arr[i].src=imgsrc[i];
arr[i].onload;
}
$("#imgImg").attr("src",imgsrc[0]);
//浮动层的宽
iwidth =$("#imgDiv").width();
fwidth=parseInt(iwidth/imgsrc.length);
restwidth = iwidth-fwidth*(imgsrc.length-1);
//添加div浮动层
for(var i=0; i<imgsrc.length; i++) {
if(i<imgsrc.length-1){
html="<div id='img"+i+"' style='position:absolute; width:"+fwidth+"px; height:100%;top:0; left:"+fwidth*i+"px;opacity:0; z-index:3'></div>";
}else {
html="<div id='img"+i+"' style='position:absolute; width:"+restwidth+"px; height:100%;top:0; left:"+fwidth*i+"px;opacity:0; z-index:3'></div>";
}
$('#imgDiv').append(html);
if(i<imgsrc.length-1){
html2="<div id='tip"+i+"' style='position:absolute; width:"+fwidth+"px; height:100%;top:0; left:"+fwidth*i+"px; border-left-width:1px;border-left-style: solid;border-left-color: #0CF;z-index:3'></div>";
}else{
widthThis =restwidth-1;
html2="<div id='tip"+i+"' style='position:absolute; width:"+widthThis+"px; height:100%;top:0; left:"+fwidth*i+"px; border-left-width:1px;border-left-style: solid;border-left-color: #0CF;border-right-width:1px;border-right-style: solid;border-right-color: #0CF;z-index:3'></div>";
}
$('#tipDiv').append(html2);
}
$('#tipDiv').css("background-color","#9FF");
$('#tip0').css("background-color","yellow");
$("#img1").click( function () { alert(2222)}); //这样子就没有反应
$("#imgDiv").click( function () { alert(3333)}); //这样子就有反应
for(var i=0; i<imgsrc.length; i++) {
$("#img"+i).bind("mouseenter",function() {
showImg(this.id.slice(-1));
});
$("#img"+i).bind("mouseleave",function(){
clearTimeout(time);
if(this.id != "img"+this.id.slice(-1)){
$('#tip'+this.id.slice(-1)).css("background-color","#9FF");
}
});
}
function showImg(i){
time =setTimeout(function(){
if(this.id = "img"+i){
$("#imgImg").attr("src",imgsrc[i]);
for(var j=0; j<imgsrc.length; j++) {
$('#tip'+j).css("background-color","#9FF");
}
showLoc(i);
}},400);
}
function showLoc(i){
$('#tip'+i).css("background-color","yellow");
}
});
请教各位，此页面在火狐和chrome中都可以运行，在ie6-8都不能运行，经查出，问题在js中：
$("#img1").click( function () { alert(2222)}); //这样子就没有反应
$("#imgDiv").click( function () { alert(3333)}); //这样子就有反应
本人前台做的不多，实在是调试不出来了
[解决办法]
将click换成 bind或live试试，语法有些不同。 例子如下：
第一种 bind
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});
第二种 live
$('.clickme').live('click', function() {
alert("Live handler called.");
});
[解决办法]
把 click 换成 onclick
[解决办法]
兼容性等神马的问题最头疼了。。同情同情。。
[解决办法]
$(document).on('click','#img1', function () { alert(2222)});
