0

我对这个感到困惑。我正在创建一个具有自己的动态内容的灯箱样式 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不是为第二种方法工作（重复return false什么都不做）。

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

该网页在此处： http: //www.apennydreadful.com 单击“章节 > 从此处开始”以查看正在运行的脚本。

任何帮助将不胜感激。

~gyz

更新 似乎增加一秒钟并不是让它工作的原因removeChild。相反，由于第二个导致代码跳过，页面刷新，也刷新了代码......所以每次其他点击时重复出现的错误永远不会到达，但它仍然存在。所以，再一次，我不知所措。即使我在使用之前清空 div ，结果也是一样的。removeChildreturn false$("#DG_lightbox").empty();$("#DG_lightbox").remove();

4

2 回答 2

0

所以我设法解决了我的问题。实际上，这似乎是一个与我最初的问题无关的非常简单的问题。我试图删除的 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 = " ";
DG_lightbox.appendChild(DG_tooltip);
};

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

一如既往地感谢所有的帮助，~gyz

于 2013-10-28T07:39:06.577 回答
0

发生这种情况的不仅仅是 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”之前，一个在之后，每个都包含一个回车符。另一方面，如果 HTML 更改为

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

该脚本工作正常。“bar”中的回车无关紧要。

于 2013-10-26T16:22:18.310 回答