the following code works perfectly in FireFox 7, but when pulling up the same page in IE 9, the jQuery functions (hide and show) don't work. However if you open debugger in IE and refresh, everything works fine. It's like the jQuery code won't work unless debugger is running and you refresh the page (or start IE with debugger on), which makes it difficult to debug obviously.
all the CSS and scripting are included for this sample. If I need to include any other information please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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=".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>
the following code works perfectly in FireFox 7, but when pulling up the same page in IE 9, the jQuery functions (hide and show) don't work. However if you open debugger in IE and refresh, everything works fine. It's like the jQuery code won't work unless debugger is running and you refresh the page (or start IE with debugger on), which makes it difficult to debug obviously.
all the CSS and scripting are included for this sample. If I need to include any other information please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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./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>
4 Answers
Reset to default 8console.log is a problem. Remove it or define it like this in case of absence before calling:
console = console || {};
console.log = console.log || function(){};
Your problem seems to be ing from the console log events. Basically IE doesn't know what to do with them and crashes the JS script before it ever gets to it.
You could go with something like:
if( window.console != undefined) {
//your console logs goe here
}
None of these solutions worked for me. Here is what I found that actually worked:
if (typeof(console) === 'undefined') {
console = { log : function(){ /*alert(arguments[0]);*/ } };
}
You want the console to work if it is actually defined.
Try this:
if (typeof console !== 'undefined') {
console = {};
console.log = function() {};
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743666347a4487036.html
评论列表（0条）