AJAX动态生成DOM后，jQuery无法为无指定子元素的div添加内容

首先，你的代码没生效主要有两个核心问题：

1. 事件触发时机错误 #

你用了$("#rooms-information").ready()，但这个方法本质上是监听初始DOM加载完成的事件，而你的HTML是通过AJAX异步加载的——当ready事件触发时，那些动态生成的.panel-body元素还根本没出现在DOM里，所以你的each循环根本没遍历到目标元素，自然不会执行后续的添加操作。

2. 类名拼写错误 #

你的HTML里的按钮容器类是buttons（复数），但JS代码里写的是.button（单数）：

var countButton = $("#" + id + " .button").length;

这会导致即使某个.panel-body里有.buttons元素，代码也会判断成数量为0，逻辑完全走偏。

修正方案 #

方案一：把处理逻辑放到AJAX的回调函数中 #

这是最稳妥的方式，确保只有当动态HTML加载完成并插入DOM后，再执行检测逻辑。比如如果你的AJAX调用是用$.ajax()写的，就把代码放到done或success回调里：

// 假设这是你的AJAX请求代码
$.ajax({
  url: "你的请求地址",
  method: "GET"
}).done(function(response) {
  // 先把动态HTML插入DOM
  $("#某个容器").html(response);
  
  // 然后执行检测逻辑
  $("#rooms-information .panel-default .panel-body").each(function() {
    var $this = $(this);
    // 修正类名为.buttons
    var countButton = $this.find(".buttons").length;
    if (countButton === 0) {
      $this.append("<p>Empty</p>");
    }
  });
});

如果是用load()方法加载内容，可以直接用它的回调参数：

$("#rooms-information").load("你的请求地址", function() {
  // 加载完成后执行检测
  $(this).find(".panel-default .panel-body").each(function() {
    var $this = $(this);
    var countButton = $this.find(".buttons").length;
    if (countButton === 0) {
      $this.append("<p>Empty</p>");
    }
  });
});

方案二：使用MutationObserver（适合无法修改AJAX回调的场景） #

如果因为某些原因你不能修改AJAX的代码，可以用MutationObserver监听DOM变化，当#rooms-information里新增元素时自动执行检测逻辑：

// 目标容器
var target = document.getElementById('rooms-information');
// 配置观察选项
var config = { childList: true, subtree: true };

// 定义回调函数
var callback = function(mutationsList) {
  for(var mutation of mutationsList) {
    if (mutation.type === 'childList') {
      // DOM变化后执行检测
      $("#rooms-information .panel-default .panel-body").each(function() {
        var $this = $(this);
        // 避免重复添加Empty标签
        if (!$this.find("p:contains('Empty')").length) {
          var countButton = $this.find(".buttons").length;
          if (countButton === 0) {
            $this.append("<p>Empty</p>");
          }
        }
      });
    }
  }
};

// 创建观察者实例
var observer = new MutationObserver(callback);
// 开始观察目标节点
observer.observe(target, config);

这个方案会自动监听DOM的变化，一旦有新元素插入，就会触发检测，适合复杂的异步场景。

另外，建议你以后调试这类问题时，可以在each循环里加console.log($(this))，看看有没有遍历到目标元素，这样能快速定位是时机问题还是选择器问题~

内容的提问来源于stack exchange，提问作者Nida Amin