MutationObserver记录错误DOM元素（可编辑div） [英] MutationObserver records wrong DOM Element (editable div)

问题描述

请考虑以下内容：

我有一个 contenteditable div：

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

我添加了一个MutationObserver来观察JavaScript中此div中的DOM更改：

I add a MutationObserver to observe DOM changes in this div in JavaScript:

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

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

解决这个问题后，我想要 manipulateAddedContent 。但是这个函数是这样声明的：

After solving this issue I want to manipulateAddedContent. Yet the function is declared like this:

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]);
        }
    }
}

在$ code> contenteditable div可以通过在现有的 p p DOM元素c $ c>元素，所以HTML看起来像：

In the contenteditable div it is possible to add a new p DOM Element by pressing enter inside an existing p element, so the HTML looks like:

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。

But the MutationObserver records the already existing p element with id="content1e".

嗯，预期MutationObserver不会做正确的如果您能给我一个替代解决方案，我也很高兴。

Well, with the anticipation that the MutationObserver won´t do it right, I am also happy if you could give me an alternative solution.

以下是一个堆栈代码段。如果您点击光标到现有的 p 元素之一，然后按Enter键创建一个新的 p 元素。 MutationObserver记录已经存在的 p 元素，而不是新创建的元素。

Below is a Stack Snippet. If you click with the cursor inside one of the existing p elements and press enter a new p element gets created. The MutationObserver records the already existing p element, but not the newly created one.

堆栈片段：

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

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

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]);
		}
	}
}

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

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

<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记录错误的元素？

So why does the MutationObserver records the wrong Element?

我该如何解决？ =>如何获得新添加的 p 元素（不含id）？

How can I fix it? => How get the newly added p element (without id)?

推荐答案

一个解决方案很简单。我只是让我得到返回的下一个DOM元素：

One solution is quite simple. I just let me get the next DOM element of the returned one:

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

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

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

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

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

<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 返回错误的元素。

But I will not accept my answer cause I still do not know WHY the mutationObserver returns the wrong element.

这篇关于MutationObserver记录错误DOM元素（可编辑div）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！