JQuery替換鏈接不工作IE 8-10

Question

我做了一個彈出窗口，我有IE 8-10（在IE11下沒有問題）的問題。我的代碼將圖像替換爲鏈接的圖像。鏈接工作在Firefox，Chrome和IE11下，但不能在其他IE版本下工作。這是默認情況下的彈出窗口。這裏是我的代碼：

<div id="fadeinboxrevol"> 
<div id="koppbase"> 
<p class="kalapacs"><img src="./images/original.png" alt="Click here" /></p> 
</div> 
</div> 
<script type="text/javascript"> 
var tto = jQuery.noConflict(); 
function get_path() { 
var piclist =['./images/1.png','./images/2.png','./images/3.png','./images/4.png']; 
var linklist =['1.html','2.html','3.html','4.html']; 
var random = Math.floor(Math.random()*piclist.length); 
var picpath = piclist[random]; 
var linkpath = linklist[random]; 
var pack = [picpath, linkpath]; 

return pack; 
} 

tto(".kalapacs").click(function() { 
var mypack = get_path(); 
var mypic = mypack[0]; 
var mypath = mypack[1]; 

var content1 = '<p class="torp"><img class="torve" src="'+mypic+'" alt="Don't wait" /><a class="tortext" href="'+mypath+'"></a></p>'; 

tto("#koppbase").html(content1); 

}); 

</script> 

這裏是我的CSS：

#fadeinboxrevol { 
position: absolute; 
width: auto; 
left: 301px; 
top: 262.5px; 
visibility: visible; 
border: none; 
background-color: ; 
padding: 0 px; 
z-index: 999; 
text-align: left; 
} 
.kalapacs:hover { 
cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), progress !important; 
} 
.torp { 
position: relative; 
} 
.tortext { 
position: absolute; 
width: 100%; 
height: 100%; 
left: 0; 
top: 0; 
display: block; 
z-index: 9999; 
} 
#revolclosebutton { 
margin-top: -40px; 
right: 20px; 
position: absolute; 
width: 16px; 
z-index: 999; 
} 

這裏是的jsfiddle一個例子，我使用jQuery 1.11版本更好的兼容性： http://jsfiddle.net/mykee/uDCKL/

我想這線太：

tto("#koppbase").replaceWith(content1); 

但沒有幫助。 :-(

什麼是我的問題

Answer 1

問題是這行代碼：var content1 = '<p class="torp"><img class="torve" src="'+mypic+'" alt="Don't wait" /><a class="tortext" href="'+mypath+'"></a></p>';

將其更改爲：var content1 = '<p class="torp"><a class="tortext" href="'+mypath+'"><img class="torve" src="'+mypic+'" alt="Don't wait" /></a></p>';

當你看到舊的IE中的一個是後空img標籤，所以很難點擊它！（將鼠標懸停在第二張圖片上。）

演示：http://jsfiddle.net/uDCKL/7/

Answer 2

我找到了解決方案！更改內容1線到這一點：

var content = '<p class="torp"><a class="tortext" href="'+mypath+'"><img class="torve" src="'+mypic+'" alt="Dont wait" /></a></p>'; 

和CSS本和工作代替：

.kalapacs:hover { 
cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), progress !important; 
} 
.torp { 
position: relative; 
} 
.tortext { 
display: block; 
} 
#revolclosebutton { 
margin-top: -40px; 
right: 20px; 
position: absolute; 
width: 16px; 
z-index: 99999; 
}