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 ではオブジェクトを完全に取り除くことはできません。ライトボックスが2回作成されるたびに、一部のコンテンツが正しく初期化されていないように見え、再度閉じると、ブラウザーは削除される前にそのことを考慮する必要があります (コンテンツが 2 回削除されているかのように)。その後、4回目までは正常に動作します。

したがって、removeChild()2回使用しcloseDG()てもこの問題はありませんが、2番目の方法で機能していないかのようにページが更新されますreturn false（重複return falseは何もしません）。

のインスタンスを 1 つだけ使用できるようにしたいのremoveChild()ですが、呼び出されたときにページが更新されないようにすることができる限り、複製メソッドを使用したいと考えています。

Web ページは次のとおりです: http://www.apennydreadful.com [章] > [ここから開始] をクリックして、スクリプトの動作を確認します。

どんな助けでも大歓迎です。

~ギズ

UPDATE 秒を追加することは、それを機能させるものremoveChildではないようです。代わりに、2 番目removeChildのコードが をスキップするためreturn false、ページが更新され、コードも更新されます...そのため、1 回おきのクリックで繰り返しエラーが発生することはありませんが、まだそこにあります。というわけで、また途方に暮れてしまいました。$("#DG_lightbox").empty();結果を使用する前に使用してdivを空にして$("#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

Chromeでも同じ問題が発生したため、これが発生するのはFirefoxだけではありません。通常の原因は、予期しないテキスト ノードの存在です。次の 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" の前と後ろに 1 対のテキスト ノードがあり、それぞれにキャリッジ リターンが含まれています。一方、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 に答える