Question

我一直在尝试为HTML模板分配一个按钮，该按钮加载了带有更多描述的模式--- buuuut出于某种原因，我实际上无法获得修改CSS display:none的按钮才能正常工作毕竟，自从它动态加载内容以来。

控制台报告btn is null，但是我尝试window.onload和DOMContentLoaded都无济于事。这与动态加载有关吗，也许我需要为单个按钮分配ID？

Codepen here for sake of long code

任何帮助将不胜感激。

Answer 1

好的，我想我已经解决了您的问题。老实说，您真的不应该像这样显示您的问题/代码，这真的很难理解和解决（阅读this）。

反正... 几个问题：

您正在克隆元素，因此，所有元素都将共享其属性（id，name等）。这很重要，因为每个人都有一个不同的模式框。
您正在尝试创建元素之前（添加事件侦听器）。因此，克隆每个元素时都应创建事件监听器。
您的模式框已使用“ display：block”进行了初始化，但您评论要求将其隐藏在开头。

我已经更改了您的代码，因此每个元素都创建了一个新的id（也包括每个模式框），并向其中添加了一个事件侦听器。

最相关的更改是：

clone.querySelector(".wineWrapper", "#myBtn").id+=count;
clone.querySelector(".wineWrapper", "#myBtn"+count).onclick=  function(e) {     
     this.nextElementSibling.style.display = "block";
}
clone.querySelector(".close").onclick=function(){
  this.parentNode.parentNode.style.display = "none";
}

Codepen

注意：我已经破坏了您的窗口侦听器（最初我认为可能是导致问题的原因），因此，如果需要，请评论答案，然后我会编辑。

模板按钮不适用于Javascript

1 个答案: