Question

我的contenteditable <div>中有一个输入元素，示例代码：

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

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

删除时如何获取输入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

Answer 2

如果您不需要IE11之前的支持，MutationObserver是完美的。

否则，您可以在keydown上侦听.ucclass事件，使用ID收集其所有后代，并设置一个计时器来检查是否有任何元素被删除：

$('.ucclass').on('keydown', function(e) {
  var ids= $(this).find('[id]'),
      self= $(this);
  setTimeout(function() {
    ids.each(function() {
      if(!self.find('#'+this.id).length) {
        //do something
      }
    });
  });
});

Fiddle

jQuery - 在contenteditable div中检测元素删除

2 个答案:

JSFiddle Link