因此我的代码在jsfiddle中独立工作。但由于一些奇怪的原因..我把它推到现场服务器后一直得到这个错误:/我无法弄清楚为什么......
错误:
mycodewitherror.js:23 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
JS:
$(document).ready(function() {
// The below collects user login name, new login date and time, and previous use URL
var element = document.querySelector('.pet-name');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
var username = $('.pet-name').text();
var referrer = document.referrer;
var date = new Date();
var month = date.getUTCMonth() + 1;
var day = date.getUTCDate();
var year = date.getUTCFullYear();
var time = date.toLocaleTimeString();
var formattedDate = month + '/' + day + '/' + year;
console.log("Pet Name Time");
console.log(referrer);
console.log(petname);
console.log(time);
console.log(formattedDate);
});
// 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(element, config);
答案 0 :(得分:5)
我遇到了同样的错误,并通过在onload / ready下插入.observe()方法而不是观察者var定义,加上target(element)和config变量的定义来解决它:
$(document).ready(function () {
var target = document.getElementById("myList");
var config = {
childList: true,
subtree: true,
attributes: true,
characterData: true
};
//note this observe method
observer.observe(target, config);
console.log("registered");
});
var observer = new MutationObserver(function (mutationRecords, observer) {
mutationRecords.forEach(function (mutation) {
console.log("mutation change in ", mutation.type, " name: ",mutation.target);
});
});
function add() {
var index = $("ul li").length;
var listItem = document.createElement("li");
listItem.textContent = index + 1;
var target = document.getElementById("myList").appendChild(listItem, "before");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
<button onclick="add()">Add list item</button>
<hr>
<ul id="myList">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</body>
请运行代码段,单击“添加列表项”按钮,然后在控制台中查看更改日志。