Question

我正在研究多个函数将各种事件监听器添加到最初隐藏的div中的东西，我们只需将其称为secretBlock。在任何给定点上只有一个活跃，但所有所述函数都将通过以下方式操作它：

首先克隆sercetBlock以确保之前没有附加侦听器
然后将显示设置为flex

HTML：

<div id="secretBlock" hidden>Secret</div>

JavaScript的：

function exampleFuction() {
    var secretBlock = document.getElementById('secretBlock');
    var secretClone = secretBlock.cloneNode(true);
    secretBlock.parentNode.replaceChild(secretClone, secretBlock);
    secretBlock.style.display = 'flex';
    ....
 }

但是设置显示的最后一部分没有触发。

我认为这与async-ness有关，但是

setTimeout(function(){ secretBlock.style.display = 'flex' }, 999);

也没有效果。

然而，其中一个函数在设置显示后立即将div添加到另一个div中，导致它正常触发：

secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock.style.display = 'flex';
otherDiv.appendChild(secretBlock);

经过一些测试后，我发现当我设置显示器时（现在vs后来）或代码中的位置无关紧要，只要secretBlock被附加到另一个div，显示更改将注册，否则保持隐藏。

.......哪种方式让我对正在发生的事情毫无头绪，因此非常感谢任何见解~~

Answer 1

是参考问题。
.replaceChild()替换secretBlock后，初始参考：

var secretBlock = document.getElementById('secretBlock')

变得过时，因为它仍然指向旧的原始元素，它不再是html文档的一部分了。因此，您需要将引用重定向到克隆元素：

secretBlock.parentNode.replaceChild(secretClone, secretBlock);
secretBlock = document.getElementById('secretBlock');
secretBlock.style.display = 'flex';

谢谢Dr.Molle！

克隆后Javascript无法取消隐藏元素？

1 个答案: