javascript - 脚本无法在页面加载 JS 上获取元素

Question

这段代码有问题:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
}
/

当页面完全加载时，类名(“可折叠”)尚未出现在页面代码中，它只是根据用户请求从远程源加载，所以，长话短说 - 它不起作用。

懒惰的解决方案是在每个带有自定义类名的页面中包含这段代码，但我不希望这样

此外，如果可能的话，我想坚持使用这个 JS 代码，而不是 jQuery

有人可以帮我修改这段代码以在这种情况下工作吗？

远程内容加载器(更新 1):

$.get('t.html', {}, function(data) {
      var $response = $('<div />').html(data);
      var $div1 = $response.find('#div1');
      $('#div-for-remote-content').append($div1);
    },'html');

//更新 2

谢谢大家的帮助，我很清楚我需要什么来解决这个问题，但我需要你的帮助:)

我需要一个脚本来检查页面上的所有 .get() 请求是否已成功完成并且所有内容都已加载到主文档中，如果是，则将脚本文件加载到主文档中。

我在这里跟进，这个文件中的脚本是否会自动在主文档上运行？

Answer 1

如果您不知道“可折叠”类何时以及如何添加到您的 DOM，您可能需要考虑使用 MutationObserver接口(interface)，它提供了准确监视对 DOM 树所做更改的能力。

例如:

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    if (document.getElementsByClassName('collapsible').length > 0) {
        // YOUR CODE HERE !!!
        this.disconnect();
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Select the node that will be observed for mutations
// this is targeting the whole html tree, you can narrow it if you want
var targetNode = document.documentElement;

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

};

通过这种方式，您的代码实际上会在执行之前等待“可折叠”类添加到您的 DOM 中。

顺便说一句，我不会生成依赖于其他人代码的代码:如果您无法控制“可折叠”类，那么您正在为代码的失败做准备......