Question

作为新手，我在滑雪。下面的代码块不起作用，我不知道该怎么做，因为我找不到错误的地方。我想要做的是：有一个数据列表，可以通过函数 notesField() 扩展和折叠 NOTES 字段——这会切换一个将块的高度转换为 0 的类。它只工作首次加载页面时。

问题区域：然后用户可以在renderLit 函数中使用insertAdjacentHTML 以相同的格式添加另一个数据块。但是，一旦添加了该数据，notesField 函数将不再正常运行。我已经确认它已被再次调用。

我认为这是因为 DOM 已加载，因此当调用新块时，addeventlistener 不会附加到新部分。不过，我不知道为什么它会停止处理现有的 html。我已经看到了一些关于将它包装在像这里 Selecting an element by the class name after insertAdjacentHTML 这样的计时器中的功能，但我无法复制它来工作。我非常感谢您可以分享的任何提示。

  notesField() {
    notesIcon.forEach((icon) =>
      icon.addEventListener("click", function (icon) {
        //I know this is very ugly but it works and I couldn't figure out another way
        const selectedNotesField = this.parentElement.parentNode
          .nextElementSibling.lastElementChild;
        selectedNotesField.classList.toggle("collapsed");
        this.classList.toggle("icon-selected");
      })
    );
  }
 
 renderLit(formData) {
    

    let html = `
  <div class="flex-container">
<i class="icon-notes icon-selected"></i> 
            <span class="person">${person}</span>

            <span class="notes collapsed">${notes}</span>
        </div></div>
  `;

    correctElement.insertAdjacentHTML("afterend", html);
    this.notesField();
  }
}

.collapsed {
  background: #fff;
  overflow: hidden;
  height: 0;
  transition: 0.5s;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.icon-selected {
  transform: rotate(180deg);
  transform-origin: center;
  transition: 0.2s;
}

<div class="flex-container">
<i class="icon-notes icon-selected"></i> 
            <span class="person">John Henry</span>

            <span class="notes collapsed">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div></div>

Answer 1

我想问题是点击没有被触发。如果你的所有功能都正确，那么试试这个快速作弊吧。除了添加点击事件的父级之外，所有子级都应该有 css pointer-events: none;

i.icon * {
  pointer-events: none
}

Answer 2

此处的问题与事件委派有关。 DOM 已经加载，因此如果没有其他策略，就不可能向子元素添加父元素。这篇文章让我找到了正确的地方：https://davidwalsh.name/event-delegate/

虽然上面的代码不是一个可操作的代码段，但我基本上是这样解决的：

const parentElement = document.getElementByID("parentElement");
_notesField() {
  parentElement.addEventListener("click", function (e) {
  if (e.target && e.target.matches(".[childelement]")) {
    
    const selectedField =
      e.target.parentElement.parentNode.nextElementSibling.lastElementChild;
    e.target.classList.toggle("[childelement class]");
    selectedField.classList.toggle("collapsed");
  }
});

通过 insertAdjacentHTML 添加内容后 DOM 操作停止工作

2 个答案: