javascript - document.querySelector 为使用 javascript 注入(inject)的 html 返回 null

Question

修改之前的问题，因为我认为我已经发现具体问题是什么。我正在使用以下代码通过 javascript 注入(inject)一些 html:

    var clickFn = function(e) {
    console.log("click registered");
    e.preventDefault();
    //console.log("id is" + " " + this.id);
    dropdown.classList.remove("open");
    btn.innerHTML = this.text;
    var activeLink = document.querySelector(".option .active");

    searchBoxes = parseInt(this.id);
    inputFieldHTML = [];

    for(i=0; i<searchBoxes; i++) {
      //j = i +1;
      inputFieldHTML.push('<input placeholder="Search" class="Box" type="text" id="gearInput' + i + '"' + "/>" + '<div class="ccontainer"><div class="cdropdown"> <button class="ctitle"><span class="cselectorText">dynamically injeced menu</span></button> <ul class="cdropdown-options"> <li class="coption"><a href="#">option 1</a></li> <li class="coption"><a href="#">option2</a></li></ul></div></div></div>' );
    }


    document.getElementById("inputBoxes").innerHTML = inputFieldHTML.join("");

    if (activeLink) {
      activeLink.classList.remove("active");
    }

    this.classList.add("active");
};

for (var i = 0; i < optionLinks.length; i++) {
   optionLinks[i].addEventListener("mousedown", clickFn, false);
}

创建这些元素后，我需要创建以下对象:

var coptionLinks = document.querySelectorAll(".coption a");
var cbtn = document.querySelector(".ctitle");
var cdropdown = document.querySelector(".cdropdown-options");

这些都返回 null，因为它们是在上一个循环创建之前设置的。如何确保在 for 循环完成后设置这些。

Answer 1

I don't get null values.这个示例与您的示例有何不同？

HTML

<div id="inputBoxes"></div>

JS

(function() {

var inputFieldHTML = [];

for(i=0; i<3; i++) {
      //j = i +1;
      inputFieldHTML.push('<input placeholder="Search" class="Box" type="text" id="gearInput' + i + '"' + "/>" + '<div class="cdropdown"> <button class="ctitle"><span class="cselectorText">Dynamically Generated Selector</span></button> <ul class="cdropdown-options"> <li class="coption"><a <href="#">option 1</a></li> <li class="coption"><a <href="#">option 2</a></li></ul></div</div>')
   }
 document.getElementById("inputBoxes").innerHTML = inputFieldHTML.join("");

var coptionLinks = document.querySelectorAll(".coption a");
var cbtn = document.querySelector(".ctitle");
var cdropdown = document.querySelector(".cdropdown-options");

console.log(coptionLinks);
console.log(cbtn);
console.log(cdropdown);

})()