注意 dom 元素的创建？答案

【问题标题】：watch for dom element creation?注意 dom 元素的创建？
【发布时间】：2012-11-03 12:31:11
【问题描述】：

所以，基本上我有一个插件，如果它是在 dom 中创建的，我想在一个元素上调用它，

例如假设我有一个名为 domWatch 的插件，如果在调用它的选择器中创建了指定的选择器，它就会运行该函数。

所以：

$('#container').domWatch('.mySelector', function(element){
    $(element).myPlugin();
});

$('#container').append($('<div />', {class: 'mySelector'})); //the new element should now have the myPlugin plugin called on it.

这可能吗？

【问题讨论】：

LiveQuery 是一种执行此操作的方法，但如果您能够在每次向 dom 附加内容时手动触发事件，它可能会有更好的性能。
您可以查看名为 Mutation events 或更好的是 Mutation Observers 的内容。但是，它还没有在所有主流浏览器中实现。

标签： javascript jquery jquery-ui dom

【解决方案1】：

您可以使用我为完全相同的目的开发的arrive.js 库（内部使用Mutation Observers）。用法：

$('#container').arrive('.mySelector', function(){
    $(this).myPlugin();
});

【讨论】：

【解决方案2】：

看看这个巧妙的 hack：http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/。它使用 CSS3 动画来检测元素何时插入 DOM。

“侦听何时创建 DOM 元素”的问题是对性能的影响，所以也许您应该考虑一种不同的方法来解决您的问题。

我相信有很多更简单的方法可以实现您的目标。

【讨论】：

警告：Mutation 事件已被弃用，请改用 Mutation Observer。

【解决方案3】：

如果您只针对非常现代的浏览器，您可以查看专为该目标设计的 MutationObserver。

https://developer.mozilla.org/en-US/docs/DOM/MutationObserver

【讨论】：

【解决方案4】：

听起来很像Live Query.，尽管这确实涉及到连续轮询，这确实会影响性能。

这里有一些demos。

【讨论】：

【解决方案5】：

这看起来像是delegated form of the .on() event 的工作：

委托事件的优点是它们可以处理来自 后代元素 稍后添加到文档中。通过选择一个保证在该时间存在的元素附加了委托事件处理程序，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这 element 可以是视图中的容器元素例如，模型-视图-控制器设计，或者 document 如果事件处理程序想要监视文档中的所有冒泡事件。这 document 元素在文档头部之前可用加载任何其他 HTML，因此在此处附加事件是安全的等待文档准备好。

【讨论】：