JQuery - 无法选择动态附加到表的对象答案

【问题标题】：JQuery -- Cannot select objects dynamically appended to a tableJQuery - 无法选择动态附加到表的对象
【发布时间】：2016-08-28 08:19:24
【问题描述】：

所以我有这个代码：

$( document ).ready(function() {
  $.getJSON(url_dbpath, function(db) {
  var tr;
  //some code

  for (...) {
    tr = $("<tr class='division' id='" + division.name + "'>");
    tr.append("<td>" + division.name + "</td>");
    tr.append(....);
    tr.append("</tr>")
    $('#datatable').append(tr);
  }

...按预期工作，正确附加加载到#datatable 对象的数据。 <tr> 对象具有正确的类和 ID。

后来我有这个：

  $("#datatable").on("click", ".division", function() {
    console.log("div");
  });

这也可以按预期工作，将侦听器添加到“.division”<tr>s。

但是，我无法以任何方式选择附加的行或数据对象。例如，我想这样做：

$(".division").hide();

但是当我在代码中调用它时，选择器返回一个空数组。我只能选择默认存在的#datatable 对象和<th>s 行。我试过$("#datatable").find(".division")（返回[]），$("#datatable").children().children()（第一个返回tbody，第二个返回[]），按ID选择，并将选择器移动到代码的末尾。

但是，当我加载页面并在控制台中使用相同的命令时，它们会返回正确的输出（在控制台中）。

如何选择对象？

【问题讨论】：

您可以使用 sn-p 或 jsfiddle 设置 minimal reproducible example 吗？显然，在那里做 ajax 很难，但如果可能的话，模拟一下。
另外，您在问题中提到了tbody，但看起来您直接附加到table 元素......也许您的选择器希望这些行位于@987654337 @?
我尝试了$("#datatable > tbody > tr > .division") 以及它的所有变体，但无论如何都应该没关系。如果我不能让它工作，我会考虑设置一个 jsfiddle。

标签： javascript jquery html jquery-selectors

【解决方案1】：

您是否尝试过以其他方式创建元素？我的意思是，尝试将您的 tr 元素构建为

$("<tr class='division' id='" + division.name + "'></tr>")
.append("<td>...</td>")
.append("<td>...</td>")
...
.appendTo($('#datatable'))

【讨论】：