// select the target node
var target = document.getElementById('user-location');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.info("EVENT TRIGGERT " + mutation.target.id);
});
});
// 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);
// simulate the Change of the text value of span
function simulateChange(){
target.innerText = "CHANGE";
}
setTimeout(simulateChange, 2000);
//More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// select the target node
var target = document.querySelector('.user-location')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
console.log($('.user-location').text());
});
// configuration of the observer:
var config = { childList: true};
// pass in the target node, as well as the observer options
observer.observe(target, config);
// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
6条答案
按热度按时间vatpfxk51#
你可以使用
DOMSubtreeModified来跟踪你的span元素的变化，即（如果你的span元素的文本动态变化）。查看以下链接https://jsbin.com/volilewiwi/edit?html,js,output
h9a6wy2h2#
change-事件为否的jQuery**，此事件仅限于input元素、textarea框和select元素。对于选择框、复选框和单选按钮，当用户用鼠标进行选择时立即激发该事件，但对于其他元素类型，该事件将推迟到元素失去焦点时激发。... * 此处是指向文档https://api.jquery.com/change/ * 的链接
MutationsObserver这样的东西，这里链接到MDN参考https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver，你可以观察DOM中的变化。在你的特定情况下，span就是问题。span更改是使用setTimeout模拟的 *如果你想/必须使用jQuery，你可以这样做：
span，只是为了演示它如何工作 *一个二个一个一个
i7uaboj43#
使用Javascript变异观察器
332nm8kg4#
您可以使用
input事件：就像这样：
示例：
6ioyuze25#
使用突变API MutationObserver
k10s72fa6#
您可以使用
javascript来实现这一点。希望能有所帮助。