正如其他几个答案中提到的，突变事件已被弃用，因此您应该改用MutationObserver。由于还没有人提供任何详细信息，所以在这里......
基本 JavaScript API
MutationObserver 的 API 相当简单。它不像突变事件那么简单，但它仍然可以。
function callback(records) {
records.forEach(function (record) {
var list = record.addedNodes;
var i = list.length - 1;
for ( ; i > -1; i-- ) {
if (list[i].nodeName === 'SELECT') {
console.log(list[i]);
}
}
});
}
var observer = new MutationObserver(callback);
var targetNode = document.body;
observer.observe(targetNode, { childList: true, subtree: true });
<script>
setTimeout(function() {
var $el = document.createElement('select');
document.body.appendChild($el);
}, 500);
</script>
让我们分解一下。
var observer = new MutationObserver(callback);
这将创建观察者。观察者还没有看到任何东西；这正是事件侦听器被附加的地方。
observer.observe(targetNode, { childList: true, subtree: true });
这使得观察者启动。第一个参数是观察者将观察变化的节点。第二个参数是关注什么的选项。
childList 意味着我想观察被添加或删除的子元素。subtree是一个修饰符，它扩展 childList到监视此元素子树中任何位置的更改（否则，它只会直接查看 中的更改targetNode）。
其他两个主要选择，除了childList有attributes和characterData，这意味着对他们的声音是什么样子。您必须使用这三个中的一个。
function callback(records) {
records.forEach(function (record) {
在回调中事情变得有点棘手。回调接收一个MutationRecord数组。每个MutationRecord可以描述一种类型的几个变化（childList，attributes，或characterData）。由于我只告诉观察者注意childList，因此我不会费心检查类型。
var list = record.addedNodes;
在这里，我获取了所有添加的子节点的 NodeList。对于所有未添加节点的记录（并且可能有很多这样的记录），这将是空的。
从那时起，我遍历添加的节点并找到任何<select>元素。
这里没有什么真正复杂的。
jQuery
...但您要求使用 jQuery。美好的。
(function($) {
var observers = [];
$.event.special.domNodeInserted = {
setup: function setup(data, namespaces) {
var observer = new MutationObserver(checkObservers);
observers.push([this, observer, []]);
},
teardown: function teardown(namespaces) {
var obs = getObserverData(this);
obs[1].disconnect();
observers = $.grep(observers, function(item) {
return item !== obs;
});
},
remove: function remove(handleObj) {
var obs = getObserverData(this);
obs[2] = obs[2].filter(function(event) {
return event[0] !== handleObj.selector && event[1] !== handleObj.handler;
});
},
add: function add(handleObj) {
var obs = getObserverData(this);
var opts = $.extend({}, {
childList: true,
subtree: true
}, handleObj.data);
obs[1].observe(this, opts);
obs[2].push([handleObj.selector, handleObj.handler]);
}
};
function getObserverData(element) {
var $el = $(element);
return $.grep(observers, function(item) {
return $el.is(item[0]);
})[0];
}
function checkObservers(records, observer) {
var obs = $.grep(observers, function(item) {
return item[1] === observer;
})[0];
var triggers = obs[2];
var changes = [];
records.forEach(function(record) {
if (record.type === 'attributes') {
if (changes.indexOf(record.target) === -1) {
changes.push(record.target);
}
return;
}
$(record.addedNodes).toArray().forEach(function(el) {
if (changes.indexOf(el) === -1) {
changes.push(el);
}
})
});
triggers.forEach(function checkTrigger(item) {
changes.forEach(function(el) {
var $el = $(el);
if ($el.is(item[0])) {
$el.trigger('domNodeInserted');
}
});
});
}
})(jQuery);
这将domNodeInserted使用jQuery 特殊事件 API创建一个名为 的新事件。你可以像这样使用它：
$(document).on("domNodeInserted", "select", function () {
$(this).combobox();
});
我个人建议寻找一个类，因为有些库会创建select用于测试目的的元素。
当然，您也可以.off("domNodeInserted", ...)通过传入这样的数据来使用或微调观看：
$(document.body).on("domNodeInserted", "select.test", {
attributes: true,
subtree: false
}, function () {
$(this).combobox();
});
select.test每当直接在主体内部的元素的属性更改时，这将触发对元素外观的检查。
你可以在下面或jsFiddle上看到它。
(function($) {
$(document).on("domNodeInserted", "select", function() {
console.log(this);
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
setTimeout(function() {
var $el = document.createElement('select');
document.body.appendChild($el);
}, 500);
</script>
<script>
(function($) {
var observers = [];
$.event.special.domNodeInserted = {
setup: function setup(data, namespaces) {
var observer = new MutationObserver(checkObservers);
observers.push([this, observer, []]);
},
teardown: function teardown(namespaces) {
var obs = getObserverData(this);
obs[1].disconnect();
observers = $.grep(observers, function(item) {
return item !== obs;
});
},
remove: function remove(handleObj) {
var obs = getObserverData(this);
obs[2] = obs[2].filter(function(event) {
return event[0] !== handleObj.selector && event[1] !== handleObj.handler;
});
},
add: function add(handleObj) {
var obs = getObserverData(this);
var opts = $.extend({}, {
childList: true,
subtree: true
}, handleObj.data);
obs[1].observe(this, opts);
obs[2].push([handleObj.selector, handleObj.handler]);
}
};
function getObserverData(element) {
var $el = $(element);
return $.grep(observers, function(item) {
return $el.is(item[0]);
})[0];
}
function checkObservers(records, observer) {
var obs = $.grep(observers, function(item) {
return item[1] === observer;
})[0];
var triggers = obs[2];
var changes = [];
records.forEach(function(record) {
if (record.type === 'attributes') {
if (changes.indexOf(record.target) === -1) {
changes.push(record.target);
}
return;
}
$(record.addedNodes).toArray().forEach(function(el) {
if (changes.indexOf(el) === -1) {
changes.push(el);
}
})
});
triggers.forEach(function checkTrigger(item) {
changes.forEach(function(el) {
var $el = $(el);
if ($el.is(item[0])) {
$el.trigger('domNodeInserted');
}
});
});
}
})(jQuery);
</script>
笔记
这个 jQuery 代码是一个相当基本的实现。在其他地方的修改使您的选择器有效的情况下，它不会触发。
例如，假设您的选择器是.test select并且文档已经有一个<select>. 添加类testto<body>将使选择器有效，但因为我只检查record.targetand record.addedNodes，事件不会触发。更改必须发生在您希望自己选择的元素上。
这可以通过在发生突变时查询选择器来避免。我选择不这样做是为了避免对已经处理过的元素造成重复事件。正确处理相邻或一般的兄弟组合会使事情变得更加棘手。
如需更全面的解决方案，请参阅https://github.com/pie6k/jquery.initialize，如Damien Ó Ceallaigh的回答中所述。但是，该库的作者宣布该库已经过时并建议您不要为此使用 jQuery。