Question

我有一个用户可以编辑的有序列表。我在每个列表元素条目上添加了其他HTML代码。我为此使用MutationObserver。当我有一个列表时，这工作正常。但是，如果我动态创建标题并重新启动新列表，则不会触发MutationObserver。

有关此示例的演示，请参见fiddle。创建新的列表元素，并在按下Enter键时将附加的html附加到每个元素。在标题中添加文本，然后选择“添加标题”按钮。关闭第一个列表，创建标题并启动新列表。但是，两个列表中的任何新列表元素都不会附加html。

我尝试断开观察者的连接并重新连接，但这不起作用。

<div><button id="makeHeading">Make Heading</button></div>
<div class='wrapper'>
  <ol contenteditable=true class="editor">
    <li><br></li>
  </ol>
</div>

function subscriber(mutations) {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      const prev = node.previousSibling;
      if (prev && prev.innerHTML !== undefined && prev.tagName === 'LI') {
        prev.innerHTML = prev.innerHTML + "- (additional html)";
      }
    });
  });
}

var observer = new MutationObserver(subscriber);
observer.observe(document.querySelector('ol[contenteditable]'), {
  childList: true,
  subtree: true
});

document.getElementById('makeHeading').addEventListener('click', function(event) {
  event.preventDefault();

  var selection = window.getSelection();
  if (selection.baseNode.parentElement.tagName === 'LI') {

    // dirty way to get DIV for example
    var parent = selection.baseNode.parentElement.parentElement.parentElement;
    var liContent = selection.baseNode.parentElement;
    parent.innerHTML = parent.innerHTML + "<div class='heading'>" + liContent.innerText + "</div><ol contenteditable=true class='editor'><li><br></li></ol>";

    // observer.disconnect();
    // observer.observe(document.querySelector('ol[contenteditable]'), { childList: true, subtree: true });
  }
});

预先感谢您的帮助和建议。

动态添加html时如何保持MutationObserver触发

0 个答案: