MutationObserverレコード間違ったDOM要素（編集可能なDIV）

Question

は、次の点を考慮

：

<div id="contentEditableDiv" contenteditable="true"> 
    <p id="content0e">Lorem ipsum...</p> 
    <p id="content1e">Lorem ipsum...</p> 
</div> 

私はMutationObserverは、DOMはJavaScriptでこのdiv要素の変化を観察するために追加します。私はcontenteditable div要素を持っている

を

var mutationObserver = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     manipulateAddedContent(mutation); 
    }); 
}); 

mutationObserver.observe(jQuery("#contentEditableDiv")[0], 
    { attributes: true, childList: true, characterData: true }); 

この問題を解決したら、manipulateAddedContentにします。しかし、関数は次のように宣言されています：contenteditableで

function manipulateAddedContent(mutation){ 
    jqMutation = jQuery(mutation); 
    if(jqMutation.prop("addedNodes").length > 0){ 
     for (i = 0; i < jqMutation.prop("addedNodes").length; i++) { 
      console.log(mutation.addedNodes[i]); 
     } 
    } 
} 

は、既存のp要素内のEnterキーを押して新しいp DOM要素を追加することが可能であるDIVので、HTMLは次のようになります。

Inspector: 
    <div id="contentEditableDiv" contenteditable="true" style="..."> 
     <p id="content0e">Lorem ipsum...</p> 
     <p id="content1e">Lorem ipsum...</p> 
     <p></p> 
    </div> 

しかし、MutationObserverは、既に存在するp要素をid="content1e"と記録します。

まあ、MutationObserverがそれを正しく行うことができないことを期待して、私に代替の解決策を与えることができれば幸いです。

以下はスタックスニペットです。既存のp要素の1つの中でカーソルをクリックしてEnterを押すと、新しいp要素が作成されます。 MutationObserverは、既に存在するp要素を記録するが、新たに作成された要素は記録しない。

スタックスニペット：

var mutationObserver = new MutationObserver(function(mutations) { 
 
\t mutations.forEach(function(mutation) { 
 
\t \t manipulateAddedContent(mutation); 
 
\t }); 
 
}); 
 

 
mutationObserver.observe(jQuery("#contentEditableDiv")[0], 
 
    { attributes: true, childList: true, characterData: true }); 
 

 
function manipulateAddedContent(mutation){ 
 
\t jqMutation = jQuery(mutation); 
 
\t if(jqMutation.prop("addedNodes").length > 0){ 
 
\t \t for (i = 0; i < jqMutation.prop("addedNodes").length; i++) { 
 
\t \t  console.log(mutation.addedNodes[i]); 
 
\t \t } 
 
\t } 
 
}

\t #contentEditableDiv { 
 
\t \t border: 1px solid black; 
 
\t \t min-height: 200px; 
 
\t \t width: 200px; 
 
\t } 
 

 
\t #contentEditableDiv p{ 
 
\t \t border: 1px solid red; 
 
\t \t margin-left: 5px; 
 
\t \t margin-right: 5px; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="contentEditableDiv" contenteditable="true" > 
 
    <p id="content0">Lorem ipsum...</p> 
 
    <p id="content1">Lorem ipsum...</p> 
 
</div>

はなぜMutationObserverは、間違った要素を記録していますか？

どうすれば修正できますか？ =>新しく追加されたp要素（IDなし）を取得する方法は？

Answer 1

1つの解決策は非常に簡単です。私はちょうど私が返さ1の次のDOM要素を取得してみましょう：

var mutationObserver = new MutationObserver(function(mutations) { 
 
\t mutations.forEach(function(mutation) { 
 
\t \t manipulateAddedContent(mutation); 
 
\t }); 
 
}); 
 

 
mutationObserver.observe(jQuery("#contentEditableDiv")[0], 
 
    { attributes: true, childList: true, characterData: true }); 
 

 
function manipulateAddedContent(mutation){ 
 
\t jqMutation = jQuery(mutation); 
 
\t if(jqMutation.prop("addedNodes").length > 0){ 
 
\t \t for (i = 0; i < jqMutation.prop("addedNodes").length; i++) { 
 
\t \t  if(typeof jQuery(mutation.addedNodes[i]).next()[0] !== "undefined"){ 
 
\t \t \t  console.log(jQuery(mutation.addedNodes[i]).next()[0]); 
 
\t \t  } 
 
\t \t } 
 
\t } 
 
}

\t #contentEditableDiv { 
 
\t \t border: 1px solid black; 
 
\t \t min-height: 200px; 
 
\t \t width: 200px; 
 
\t } 
 

 
\t #contentEditableDiv p{ 
 
\t \t border: 1px solid red; 
 
\t \t margin-left: 5px; 
 
\t \t margin-right: 5px; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="contentEditableDiv" contenteditable="true" > 
 
    <p id="content0">Lorem ipsum...</p> 
 
    <p id="content1">Lorem ipsum...</p> 
 
</div>

しかし、私は私の答え原因をmutationObserverが間違った要素を返しますなぜ私はまだ知らない受け入れることはありません。