6

I'm looking for something like this:

var div = document.createElement('div');
div.id = 'proprioceptiveDiv';
$(div).on('appendedToDOM', function() {
  // ...
});

document.body.appendChild(div); // triggers above handler

Does this exist? I'm using jQuery and would rather not import a whole plugin or another library just for this ability, so I'm only interested in a short solution.

4

2 回答 2

2

您可以使用Mutation Events，但这些事件在 DOM 事件规范中已被标记为已弃用，因为 API 的设计存在缺陷。

MutationEvent 接口是在 DOM 级别 2 事件中引入的，但尚未在用户代理之间完全且可互操作地实现。此外，也有人批评该接口在设计时引入了性能和实现方面的挑战。DOM4 提供了一种使用 MutationObserver 接口的新机制，该接口解决了突变事件解决的用例，但以更高效的方式。因此，本规范描述了突变事件以供参考和遗留行为的完整性，但不赞成使用 MutationEvent 接口。

一个简单的选择是使用.trigger()方法：

var $div = $(div).on('appendedToDOM', function() {
  console.log('appended');
});

// ...

$div.appendTo('body').trigger('appendedToDOM');

您还可以创建一个辅助函数来附加元素并触发自定义事件：

function append(elem, target, cEvent) {
   if (typeof target === 'undefined') var target = document.body;
   if (typeof cEvent === 'undefined') var cEvent = 'appendedToDOM';
   $(elem).appendTo(target).trigger(cEvent);
}

// Usage
append(element [, targetElement] [, customEvent]);
于 2013-09-09T11:57:19.377 回答
2

@Undefined 的回答给了我一个想法。由于不推荐使用突变事件，这不是一个很好的解决方案，但无论如何：

$(document).bind("DOMNodeInserted", function(e) {
  $(e.target).trigger('appendedToDOM');
});
于 2013-09-09T12:49:01.577 回答