2011-10-21 41 views
4

以下代碼在FireFox 7中完美工作,但是當在IE 9中拉起同一頁時,jQuery函數(隱藏並顯示)不起作用。但是,如果你在IE中打開調試器並刷新,一切工作正常。這就像jQuery代碼將無法正常工作,除非調試器正在運行,並且您刷新頁面(或者在調試器開啓的情況下啓動IE),這使得顯然很難進行調試。javascript在IE中不工作,除非調試器正在運行

本示例包含所有CSS和腳本。如果我需要包含任何其他信息,請讓我知道。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<!--<link href="_css/main.css" rel="stylesheet" type="text/css" />--> 


<style>  

html, body { 
    margin: 0px; 
    padding: 0px; 
} 

#wrapper { 
    width:1000px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
} 
#sidebar { 
    width: 100px; 
    height:100%; 
    float: left; 
    background-color: #FF0; 
} 

#maincontent { 
    float: left; 
    width: 400px; 
    height:100%; 
    ; 
    background: #c1d8b9; 
} 
#right { 
    width: 500px; 
    background-color: #0F3; 
    float: right; 
    height: 100%; 
} 



body { 
    background-color: white; 
} 


ul 
{ 
    list-style-type: none; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 



<body> 
<div id="wrapper"> 
    <div id="sidebar"> Sidebar 
    <ul > 
    </ul> 
    </div> 
    <div id="maincontent"> Main content 
     <button id="hidr">Hide</button> 
    <button id="showr">Show</button> 
    <ul id="listMiddle"> 
     <li id="li1">TEST1</li> 
     <li id="li2">TEST2</li> 
     <li id="li3">TEST3</li> 
     <li id="li4">TEST4</li> 
    </ul> 
    </div> 
    <div id="right"> Right 
    <ul id="listRight"> 
    </ul> 
    </div> 
</div> 

<script>  
var arryLIs = document.getElementsByTagName('li'); 
var middleUL = document.getElementById('listMiddle'); 
var rightUL = document.getElementById('listRight'); 
var arrymiddleLIs = middleUL.getElementsByTagName('li'); 
var arryrightLIs = rightUL.getElementsByTagName('li'); 


for (var i=0; i<arryLIs.length; i++){ 
    arryLIs[i].onclick = moveright; 
    //console.log(arryLIs[i].innerHTML); 

} 


console.log(arrymiddleLIs); 
console.log(middleUL); 

var goBefore=null; 

function moveright() { 
    var goBefore=null; 
    goBefore=findSortRight(this); 
    document.getElementById('listRight').insertBefore(this,goBefore); 
    this.onclick = moveleft; 
    //console.log(arrymiddleLIs); 
    //console.log(arryrightLIs); 

} 

function moveleft() { 
    document.getElementById('listMiddle').appendChild(this); 
    this.onclick = moveright; 
    console.log(arrymiddleLIs); 
    console.log(arryrightLIs); 
} 

function findSortRight(newElement){ 
    var goBefore=null; 
    for (var r=0; r<arryrightLIs.length; r++){ 
     //console.log(newElement.innerHTML<=arryrightLIs[r].innerHTML); 
     if (newElement.innerHTML<=arryrightLIs[r].innerHTML) { 
      //console.log(arryrightLIs[r]); 
      goBefore=arryrightLIs[r]; 
      break; 
     } 
    } 
// console.log(goBefore.innerHTML); 
    return goBefore; 

} 



    $("#hidr").click(function() { 
     $("li").hide(); 
    }); 

    $("#showr").click(function() { 
     $("li").show(); 
    }); 


</script> 

</body> 
</html> 

回答

8

console.log是個問題。刪除它或定義它是這樣的情況下,在沒有電話之前:

console = console || {}; 
console.log = console.log || function(){}; 
+0

刪除它解決了問題!解釋了爲什麼調試器運行時它工作正常。感謝您的快速幫助和附加信息。 – dangel

+2

無論如何,至少在Chrome中,這會覆蓋console.log。 'console = console || {}; console.log = console.log ||函數(){};'解決了這個問題。 –

+0

爲IE 9使用@ user1265146解決方案 – Barun

3

您的問題似乎來自控制檯日誌事件。基本上IE不知道如何處理它們,並且在JS腳本到達之前崩潰。

if(window.console != undefined) { 
    //your console logs goe here 
} 
0

你想如果真正定義它的控制檯工作:

你可能喜歡的東西去。

試試這個:

if (typeof console !== 'undefined') { 
     console = {}; 
     console.log = function() {}; 
    } 
1

這些解決方案都沒有爲我工作。這裏是我發現的實際工作:

if (typeof(console) === 'undefined') { 
    console = { log : function(){ /*alert(arguments[0]);*/ } }; 
} 
相關問題