javascript - jQuery - 检测 contenteditable div 中的元素删除

Question

我的 contenteditable <div> 中有一个 input 元素，示例代码:

<div class="ucclass" contenteditable="true">
   <input id="abc" class="js_xxx">
</div>

我有一段代码用于将具有自动生成的 ID 的输入粘贴到 <div> 中。

删除时如何抓取input id？

我们将不胜感激。

Answer 1

你可以使用 MutationObserver为了达成这个。要跟踪从 contenteditable 元素中删除的任何类型的节点，请观察以下示例

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

        //console.log($(mutation.removedNodes)); // <<-- includes text nodes as well

        $(mutation.removedNodes).each(function(value, index) {
            if(this.nodeType === 1) {
                console.log(this.id) // abc
            }
        });
    });
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe($('.ucclass')[0], config);

JSFiddle Link