Question

嗯，大家好，我的第一篇文章在这里：）

我会尽量清楚，因为遇到的问题只是...... （英语不是我的母语，抱歉，如果它不完美）

我在网站上工作，经过一段时间的用户不活动后，会出现一个聊天框。它在开始时不存在于DOM中，并且不会出现在简单的CSS类中。它在DOM中使用ID＆＃34; mychatcontainer＆＃34;创建了一个新的块div，所以要抓住它，我使用变异观察器，在我的代码下面（它不完美，我＆＃ 39;我没有完成它，但它完成了我目前所需的工作：））

$('.trigger').click(function() {
  $('.sub-header').toggleClass('opened');
}).stop();

Here is the result of console.log

如您所见，它只显示

var target = document.getElementById('page13621');
var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    if (mutation.addedNodes[0].id === "mychatcontainer") {
      console.log(mutation.type);
      console.log(mutation.addedNodes);
      console.log(mutation.addedNodes[0]);
      console.log(document.getElementById("mychatcontainer"));      
      console.log(this.document.getElementById("mychatcontainer"));
    }
  });    
});
var config = { attributes: false, childList: true, characterData: true, subtree: true };
observer.observe(target, config);

没有可能接触到孩子，所以那部分是有趣的。

然而，如果我使用浏览器控制台手动执行此操作，我会获得所有信息以及对儿童的访问权限！

Manual result

首先提出问题，我错过了一点吗？！

我想引起你注意的第二件事是：昨天我在我的个人网络上尝试了我的代码，console.log可以访问孩子，但只在第一次尝试时，然后当我重新登录页面时，出现同样的问题，无法访问孩子 < / p>

那么第二个问题，那是什么？太疯狂了......

感谢您的关注，希望有人能帮助我:)。

Answer 1

好的，即使我不喜欢它，我也找到了解决方案，我想在我的情况下我没有选择..

正如你在下面看到的，我添加了一个1.2秒的setTiemout函数，我不能不幸地缩短那个时间，但最后我可以访问子元素。

var target = document.getElementById('page13621');
var observer = new MutationObserver(function(mutations){
  mutations.forEach(function(mutation){
    if (mutation.addedNodes[0].id === "#ID_of_created_block") {
      //add a setTiemout function
      myFunction();
    }
  });    
});
var config = { attributes: false, childList: true, characterData: true, subtree: true };
observer.observe(target, config);

var myFunction = function() {
  setTimeout(function(){
    // Here add your code, in my exemple it was my console.log
  }, 1200);
}

有人可以确认我现有的DOM和创建的DOM之间存在同步时间吗？这解释了1.2秒的延迟。

开发人员的提示，在用户体验期间不要在DOM中创建新元素。在开头创建所有内容然后隐藏或显示它。就像那样，儿童的接触是毫不拖延的。

感谢您的关注，欢迎一切改善我的解决方案：）

在DOM中创建的元素上的MutationObserver之后访问子节点

1 个答案: