jQuery检测某些类的div已被添加到DOM
我使用.on()来绑定页面加载后创build的div的事件。 它适用于click，mouseenter …但我需要知道什么时候添加了类MyClass的新div。 我正在寻找这个：
$('#MyContainer').on({ wascreated: function () { DoSomething($(this)); } }, '.MyClass');
我该怎么做呢？ 我设法写我的整个应用程序没有插件，我想保持这种方式。
谢谢。
以前可以挂钩到jQuery的domManip方法来捕获所有的jQuery dom操作，并查看哪些元素插入等，但jQuery团队closures在jQuery 3.0 +，因为它通常不是一个好的解决scheme，以这种方式钩入jQuery的方法，他们已经做到这一点，所以内部的domManip方法不再可用于核心jQuery代码之外。
突变事件也被弃用，因为之前可以做类似的事情
$(document).on('DOMNodeInserted', function(e) { if ( $(e.target).hasClass('MyClass') ) { //element with .MyClass was inserted. } });
这应该避免，今天应该使用突变观察员，这将是这样的工作
var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation) if (mutation.addedNodes && mutation.addedNodes.length > 0) { // element added to DOM var hasClass = [].some.call(mutation.addedNodes, function(el) { return el.classList.contains('MyClass') }); if (hasClass) { // element has class `MyClass` console.log('element ".MyClass" added'); } } }); }); var config = { attributes: true, childList: true, characterData: true }; observer.observe(document.body, config);
这是我的插件，做到了 – jquery.initialize
.each与你使用.each函数是一样的，但是.initialize元素的function与.initialize不同之处.each ，它也会初始化将来添加的元素，而不需要任何额外的代码 – 无论你是使用AJAX还是其他的。
Initialize与.each函数的语法相同
$(".some-element").initialize( function(){ $(this).css("color", "blue"); });
但是现在，如果新的元素匹配.some-elementselect器将出现在页面上，它将立即初始化。 添加新项目的方式并不重要，您不需要关心任何callback等。
$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!
插件基于MutationObserver
3年以后的经验，这是我如何听“添加到DOM的某个类的元素” ：您只需在jQuery html()函数中添加一个钩子，如下所示：
function Start() { var OldHtml = window.jQuery.fn.html; window.jQuery.fn.html = function () { var EnhancedHtml = OldHtml.apply(this, arguments); if (arguments.length && EnhancedHtml.find('.MyClass').length) { var TheElementAdded = EnhancedHtml.find('.MyClass'); //there it is } return EnhancedHtml; } } $(Start);
这工作，如果你使用jQuery，我这样做。 它不依赖于浏览器特定事件DOMNodeInserted ，它不是跨浏览器兼容的。 我还为.prepend()添加了相同的实现
总的来说，这对我来说就像是一种魅力，对你也有希望。
在回顾了这篇文章和其他几篇文章之后，我试图将我认为最好的东西提炼成简单的东西，使我能够检测何时插入了一个元素类，然后对这些元素进行操作 。
function onElementInserted(containerSelector, elementSelector, callback) { var onMutationsObserved = function(mutations) { mutations.forEach(function(mutation) { if (mutation.addedNodes.length) { var elements = $(mutation.addedNodes).find(elementSelector); for (var i = 0, len = elements.length; i < len; i++) { callback(elements[i]); } } }); }; var target = $(containerSelector)[0]; var config = { childList: true, subtree: true }; var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var observer = new MutationObserver(onMutationsObserved); observer.observe(target, config); } onElementInserted('body', '.myTargetElement', function(element) { console.log(element); });
对我来说重要的是，这允许a）目标元素在“addedNodes”内的任何深度存在，b）仅在最初插入时处理元素的能力（不需要search整个文档设置或忽略“已处理”标志）。
你可以使用突变事件
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
编辑
来自MDN： https ： //developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events
已弃用此function已从网上删除。 尽pipe一些浏览器可能仍然支持它，但它正在被丢弃。 不要在旧的或新的项目中使用它。 使用它的页面或Web应用程序可能随时中断。
突变观察者被提议替代DOM4中的突变事件。 它们将被包含在Firefox 14和Chrome 18中。
https://developer.mozilla.org/en/docs/Web/API/MutationObserver
MutationObserver为开发人员提供了对DOM中的更改作出反应的方法。 它被devise为DOM3 Events规范中定义的突变事件的替代品。
用法示例
// select the target node var target = document.querySelector('#some-id'); // create an observer instance var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // configuration of the observer: var config = { attributes: true, childList: true, characterData: true }; // pass in the target node, as well as the observer options observer.observe(target, config); // later, you can stop observing observer.disconnect();
