Question

我对这个感到困惑。我正在创建一个带有自己动态内容的灯箱式div，如下所示：

//ADD LIGHTBOX DIV
var DG_lightbox = document.createElement('div');
DG_lightbox.className = "DG_lightbox";
DG_lightbox.id= "DG_lightbox";
document.body.appendChild(DG_lightbox);
//ADD MAIN CONTENT DIV
var DG_contentbox = document.createElement('div');
DG_contentbox.className = "DG_contentbox";
DG_contentbox.id= "DG_contentbox";
DG_lightbox.appendChild(DG_contentbox);

显然有很多内容，但它们都以相同的方式添加到DG_lightbox div中。灯箱有一个关闭按钮，应该是这样的：

function closeDG(){
DG_lightbox.parentNode.removeChild(DG_lightbox);
return false;
window.location.hash = "";  
}

它在IE和Chrome中运行良好，但在Firefox中它似乎并没有完全摆脱对象。创建灯箱的每个秒时间，某些内容似乎无法正确初始化，再次关闭时，浏览器必须在删除之前考虑它（如如果删除了两倍的内容）。之后，它会再次正常工作，直到第四时间。

因此，如果我在removeChild()中使用closeDG()两次，我就没有这个问题，但页面会刷新，好像return false不适用于第二种方法（重复{ {1}}什么也没做。）

我希望能够只使用return false的一个实例，但我愿意使用重复的方法，只要我可以阻止页面在被调用时刷新。

网页位于：http://www.apennydreadful.com 点击“章节＆gt;从这里开始”以查看正在运行的脚本。

非常感谢任何帮助。

〜GYZ

更新似乎添加第二个removeChild() 而不是是什么让它起作用。相反，由于第二个removeChild导致代码跳过removeChild，页面刷新，刷新代码......所以每次其他点击的重复错误永远不会到达，但它仍然是那里。所以，我再次感到茫然。即使我在使用return false之前使用$("#DG_lightbox").empty();清空div，结果也一样。

Answer 1

不仅仅是Firefox发生了这种情况，因为我在Chrome中看到了同样的问题。通常的原因是存在意外的文本节点。以下HTML将完全按照您描述的方式失败：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html>
<head>
<title>Replace Test</title>
</head>
<body> 
<p id="demo">Click the button to replace </p> 
<button onclick="myFunction()">Try it</button> 
<script>
var cnt = 1;
var para=document.createElement("p");
var innerDiv =document.createElement("div");
var node=document.createTextNode("If original text is still showing, click button again, count ="+cnt);
para.appendChild(node);
para.id = "p1";
innerDiv.appendChild(para);

function myFunction()
{ 
  var  target=document.getElementById("foo");
  target.appendChild(innerDiv); 
  var current = target.firstChild; 
  target.removeChild(target.firstChild);
  cnt = cnt +1;
  window.console.log("btn pressed, cnt="+cnt); 
}
</script>
<div id="foo">
   <div id="bar"> 
    <p>This is text that should vanish when the button is clicked.</p> 
   </div>
</div> 
</body>
</html>

问题是“bar”div元素实际上不是“foo”的第一个子节点。那里是一对文本节点，一个在“bar”之前，一个在after之后，每个包含一个回车符。另一方面，如果HTML更改为

<div id="foo"><div id="bar"> 
  <p>This is text that should vanish when the button is clicked.</p> 
</div></div>

脚本正常运行。 “bar”中的回车无所谓。

Answer 2

所以我设法解决了我的问题。实际上，这似乎是一个非常简单的问题，与我最初的问题无关。我试图删除的div内部的动态内容是在创建父div的同一函数内定义的。像这样：

function clickThis(){
var DG_lightbox = document.createElement('div');
DG_lightbox.className = "DG_lightbox";
DG_lightbox.id= "DG_lightbox";
document.body.appendChild(DG_lightbox);

var DG_tooltip = document.createElement('div');
DG_tooltip.className = "DG_tooltip";
DG_tooltip.id= "DG_tooltip";
DG_tooltip.innerHTML = "&nbsp;";
DG_lightbox.appendChild(DG_tooltip);
};

这些元素在Chrome和IE的下一次点击链接中删除并重新创建，但Firefox没有。不知道为什么。也许更有知识的人可以解释。无论如何，我在全球范围内定义了变量，现在一切都像雨一样。

感谢所有的帮助，〜gyz

必须在Firefox中运行removeChild（）两次

2 个答案: