jQuery each() 方法不适用于附加元素答案

【问题标题】：jQuery each() method does not working for appended elementsjQuery each() 方法不适用于附加元素
【发布时间】：2019-12-21 02:50:19
【问题描述】：

我正在尝试将带有内部标签的tr 附加到我的表中。此功能在文档准备好时发生。然后使用.each() 方法，我试图将一些类添加到附加的tr 元素中。但似乎 jQuery 无法识别我附加的 html 内容。我应该怎么做才能解决我的问题？谢谢大家。

我要附加的 html 内容：

let appndContent = '<tr class="RoomTableTr" style="background-color: red;">\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
'</tr>';

$('.DepartureDate').each(function() {
  let day = parseInt($(this).val().substring(8, 10)),
    month = parseInt($(this).val().substring(5, 7)),
    year = parseInt($(this).val().substring(0, 4)),
    DayOfWeek = new persianDate();
  DayOfWeek.date(day);
  DayOfWeek.month(month);
  DayOfWeek.year(year);
  let TheDay = DayOfWeek.format('dddd');

  let CostInf = $(this).parent().parent().find('.CostInf').val();
  switch (TheDay) {
    case 'شنبه':
      $(".RoomTableTr td:nth-child(1) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'یکشنبه':
      $(".RoomTableTr td:nth-child(2) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'دوشنبه':
      $(".RoomTableTr td:nth-child(3) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'سه شنبه':
      $(".RoomTableTr td:nth-child(4) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'چهار شنبه':
      $(".RoomTableTr td:nth-child(5) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'پنج‌شنبه':
      $(".RoomTableTr td:nth-child(6) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'جمعه':
      $(".RoomTableTr td:nth-child(7) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    default:
      break;
  }
  let lastDay = $(this).parent().find('.DepartureDateMark').last();
  lastDay.attr('data-lastDay', true);
  lastDay.addClass('data-lastDay');
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

我给你做了一个sn-p。请添加相关的 HTML 和代码以显示minimal reproducible example
appndContent 何时何地实际附加到 DOM？

标签： javascript jquery append each

【解决方案1】：

您应该在 switch-case 中使用变量“appndContent”之前附加它（例如，在每个函数之前）。如果您在 switch-case 之后附加或尚未附加，则此查询将不起作用。

【讨论】：