Question

以下代码在FireFox 7中完美运行，但是当在IE 9中提取同一页面时，jQuery函数（隐藏和显示）不起作用。但是，如果你在IE中打开调试器并刷新，一切正常。这就像jQuery代码无法工作，除非调试器正在运行并刷新页面（或启动调试器启动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>

Answer 1

console.log是个问题。在调用之前将其删除或定义如下：

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

Answer 2

您的问题似乎来自控制台日志事件。基本上IE不知道如何处理它们并在它到达之前崩溃JS脚本。

你可以选择以下内容：

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

Answer 3

这些解决方案都不适合我。以下是我发现实际工作的内容：

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

Answer 4

如果实际定义了控制台，您希望控制台正常工作。

试试这个：

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

除非调试器正在运行，否则javascript在IE中不起作用

4 个答案: