Необходимо запустить removeChild () дважды в Firefox

Question

Необходимо запустить removeChild () дважды в Firefox

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 Нажмите "Главы> Начните здесь", чтобы увидеть сценарий в действии.

Любая помощь будет принята с благодарностью.

~ Гыз

UPDATE Похоже, что добавление второй removeChild - это не то, что заставить ее работать. Вместо этого, поскольку вторая removeChild заставляет код пропускать return false, страница обновляется, обновляя также код... поэтому повторяющаяся ошибка на каждом другом клике никогда не достигается, но она все еще существует. Итак, опять же, я в недоумении. Даже если я $("#DG_lightbox").empty(); div, используя $("#DG_lightbox").empty(); перед использованием $("#DG_lightbox").remove(); результат тот же.

gyzhor 19 окт. 2013, в 22:52

Источник

0

Ваша ссылка дала 503, а код, который вы вставили, не позволяет нам сказать, как ваш контекст позволяет closeDG видеть DG_lightbox.
Joseph Lennox 19 окт. 2013, в 22:19
0

Странно, www.apennydreadful.com работает на меня. Я также не уверен, что вы имеете в виду, когда контекст позволяет closeDG видеть DG_lightbox ... переменная DG_lightbox должна ссылаться непосредственно на созданный объект. Я, вероятно, неправильно понимаю ваш комментарий.
gyzhor 20 окт. 2013, в 00:25
0

Я попытался сделать jsfiddle для вышеперечисленного, но, похоже, он не хочет работать в скрипте (что-то с возвращаемым false, создающим ошибку запроса после публикации - я не получаю), но код работает в обычном html: jsfiddle.net/gyzhor/2tbRg/6
gyzhor 20 окт. 2013, в 01:02
0

Когда вы вызываете removeChild во второй раз, он генерирует ошибку, поэтому return false никогда не достигается, поэтому вы получаете перезагрузку страницы. Трудно сказать, что не так с тем случаем, когда вы дважды не вызываете removeChild , потому что сейчас это не то, что делает страница. Не могли бы вы восстановить его так, чтобы он вызывался только один раз в Firefox, пожалуйста?
Boris Zbarsky 20 окт. 2013, в 01:43
0

Конечно, Борис. Я обновил страницу, чтобы вызывать removeChild только один раз. Если вы дважды откроете страницу «начать здесь», вы увидите, что стрелка на следующей странице не появляется во второй раз, и для ее закрытия потребуется больше времени.
gyzhor 20 окт. 2013, в 04:02
0

Похоже, у моего хоста возникли проблемы с сетью, с учётом того 503, с которым Джозеф столкнулся ранее (о чем я узнал и сегодня). Надеюсь, это скоро прояснится.
gyzhor 20 окт. 2013, в 22:42
0

Хорошо, зафиксируй сайт. Стало совершенно ясно, что причина дубликата removeChild () скрыта где-то еще в коде, поэтому я буду продолжать искать его. В то же время, если кто-то может придумать способ не допустить игнорирования return false результата, он хотел бы использовать его в качестве временного обходного пути. Спасибо!
gyzhor 23 окт. 2013, в 18:04

Показать ещё 5 комментариев

Теги:

javascript

jquery

firefox

removechild

2 ответа

Ещё вопросы

Ваша ссылка дала 503, а код, который вы вставили, не позволяет нам сказать, как ваш контекст позволяет closeDG видеть DG_lightbox.
Странно, www.apennydreadful.com работает на меня. Я также не уверен, что вы имеете в виду, когда контекст позволяет closeDG видеть DG_lightbox ... переменная DG_lightbox должна ссылаться непосредственно на созданный объект. Я, вероятно, неправильно понимаю ваш комментарий.
Я попытался сделать jsfiddle для вышеперечисленного, но, похоже, он не хочет работать в скрипте (что-то с возвращаемым false, создающим ошибку запроса после публикации - я не получаю), но код работает в обычном html: jsfiddle.net/gyzhor/2tbRg/6
Когда вы вызываете removeChild во второй раз, он генерирует ошибку, поэтому return false никогда не достигается, поэтому вы получаете перезагрузку страницы. Трудно сказать, что не так с тем случаем, когда вы дважды не вызываете removeChild , потому что сейчас это не то, что делает страница. Не могли бы вы восстановить его так, чтобы он вызывался только один раз в Firefox, пожалуйста?
Конечно, Борис. Я обновил страницу, чтобы вызывать removeChild только один раз. Если вы дважды откроете страницу «начать здесь», вы увидите, что стрелка на следующей странице не появляется во второй раз, и для ее закрытия потребуется больше времени.
Похоже, у моего хоста возникли проблемы с сетью, с учётом того 503, с которым Джозеф столкнулся ранее (о чем я узнал и сегодня). Надеюсь, это скоро прояснится.
Хорошо, зафиксируй сайт. Стало совершенно ясно, что причина дубликата removeChild () скрыта где-то еще в коде, поэтому я буду продолжать искать его. В то же время, если кто-то может придумать способ не допустить игнорирования return false результата, он хотел бы использовать его в качестве временного обходного пути. Спасибо!

gyzhor · Answer 1 · 2013-10-28T04-43-00.000Z

Поэтому мне удалось исправить свою проблему. Похоже, довольно простая проблема, не связанная с моим первоначальным вопросом. Динамический контент внутри 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

LJ in NJ · Answer 2 · 2013-10-26T14-44-00.000Z

Это не просто 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>

Проблема в том, что элемент div "bar" не является первым дочерним узлом "foo". Существует пара текстовых узлов, одна перед "баром" и одна за другой, каждая из которых содержит возврат каретки. С другой стороны, если HTML изменен на

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

скрипт работает правильно. Каретка возвращается в "бар" не имеет значения.

Интересно, но я использую метод firstChild (). Фактически, если я полностью function clodeDG(){ jQuery("#DG_lightbox").empty(); jQuery("#DG_lightbox").remove(); } div перед тем, как попытаться удалить его, я получаю тот же результат (предъявляя что-то подобное): function clodeDG(){ jQuery("#DG_lightbox").empty(); jQuery("#DG_lightbox").remove(); }
Одна вещь, которая сбила меня с толку, когда я столкнулся с подобной проблемой, это различие между Узлами и Элементами. Возврат каретки, будучи текстом, создает экземпляр как текстовые узлы, а не как элементы. Я полагаю, что ваши операции remove () и empty () удаляют элементы, но оставляют нетронутыми любые узлы в вашей структуре DOM. Я обнаружил, что использование отладчика моего браузера для изучения документа очень помогло.