JQuery 无法访问使用 DOM 创建的元素答案

【问题标题】：JQuery can't access elements created using DOMJQuery 无法访问使用 DOM 创建的元素
【发布时间】：2016-11-13 05:44:59
【问题描述】：

美好的一天！我在下面有这段代码，它显示了一个表格并且它正在工作。我可以显示表格及其内容。代码如下：

     if(xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        var x = 0;
        var table = document.getElementById("tblData");

        for(x=0; x<data.length; x++) {

          dataInstance = data[x].split('*');

          var row = document.createElement("tr");
          var td1 = document.createElement("td");
          var td2 = document.createElement("td");
          var td3 = document.createElement("td");
          var td4 = document.createElement("td");
          var td5 = document.createElement("td");
          var td6 = document.createElement("td");
          var td7 = document.createElement("td");;

          var cb = document.createElement('input');
          cb.setAttribute("type", "checkbox");

          var tn1 = document.createTextNode(dataInstance[1]);
          var tn2 = document.createTextNode(dataInstance[2]);
          var tn3 = document.createTextNode(dataInstance[3]);
          var tn4 = document.createTextNode(dataInstance[4]);
          var tn5 = document.createTextNode(dataInstance[5]);
          var tn6 = document.createTextNode(dataInstance[6]);

          td1.appendChild(cb);
          td2.appendChild(tn1);
          td3.appendChild(tn2);
          td4.appendChild(tn3);
          td5.appendChild(tn4);
          td6.appendChild(tn5);
          td7.appendChild(tn6);

          row.appendChild(td1);
          row.appendChild(td2);
          row.appendChild(td3);
          row.appendChild(td4);
          row.appendChild(td5);
          row.appendChild(td6);
          row.appendChild(td7);

          table.appendChild(row);
        }
    }

但是，当我尝试使用 JQuery 在我的表上交替放置一些颜色时，它找不到使用 DOM 创建的行。只有在我的 html 代码中的表的表头是用颜色填充的。这是我的 JQuery 代码：

 $("#tblData tr:even").css("background-color", "pink");
 $("#tblData tr:odd").css("background-color", "yellow");

你能帮帮我吗？非常感谢您！任何帮助表示赞赏！

【问题讨论】：

你为什么不用CSS呢？ tr:nth-child(even) { background-color: pink } tr:nth-child(odd) { background-color: yellow }
我已经考虑过了，但是我也有其他代码需要这种解决方案。无论如何，谢谢你的建议。
这个 jQuery 代码什么时候运行？您添加行的代码看起来像是在 AJAX 请求完成后添加的。那是异步发生的。您需要确保 jQuery 代码在该代码完成后正在运行。
在这一行之后给它着色 table.appendChild(row);
我还有其他代码需要这种解决方案 - CSS 应用于每个匹配选择器的元素 Oo 文档中每个表格行的颜色都会改变.

标签： jquery dom createelement

【解决方案1】：

我的问题的答案是在创建元素后运行 JQuery 代码。

【讨论】：