如何选择无事件的动态创建元素并批量处理多个动态创建元素？

嘿，我来帮你梳理清楚这个问题～首先直接给你结论：你设想的$('body').on('ready', '.all-dynamically-created-elements', function () { ... })这种方式完全不可行，原因我后面会解释，先给你针对两个需求的正确解决方案。

为什么你的写法不可行？ #

jQuery的on()方法里的ready事件是专门用来监听整个文档加载完成的，它只能绑定在document对象上（或者用$(function() {})这种简写），不能通过事件委托的方式绑定到动态子元素上。而且事件委托的核心是监听父元素上冒泡过来的子元素事件（比如click、input），但动态元素本身并没有ready事件，所以这种写法从原理上就不成立。

需求1：选择单个无事件绑定的动态创建元素 #

分两种场景处理：

场景A：你自己的代码创建元素 #

这种情况最简单，在元素创建并添加到DOM后，直接获取它进行处理就行，不需要额外监听：

// 动态创建元素
const $singleEle = $('<div class="dynamically-created-element">单个动态元素</div>');
// 添加到DOM
$('body').append($singleEle);
// 直接处理这个元素
$singleEle.css('background-color', '#f0f0f0').attr('data-id', '123');

场景B：第三方代码创建的元素（无法控制创建时机） #

这时候可以用MutationObserver来监听DOM的变化，当目标元素出现在DOM中时自动处理：

// 创建MutationObserver实例
const singleEleObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 从新增的节点里筛选目标元素
    const targetEle = $(mutation.addedNodes).filter('.dynamically-created-element')[0];
    if (targetEle) {
      // 执行你的处理逻辑
      $(targetEle).text('已处理的单个动态元素');
      // 如果只需要处理一次，处理完可以断开观察者
      singleEleObserver.disconnect();
    }
  });
});

// 配置观察选项：监听子节点变化，包括子树
const observerConfig = { childList: true, subtree: true };

// 开始监听body节点的变化
singleEleObserver.observe(document.body, observerConfig);

需求2：选择多个动态创建的元素并逐个处理 #

同样分两种场景：

场景A：你自己的代码创建元素 #

创建批量元素后，直接用each()方法逐个处理：

// 动态创建多个元素（这里用循环生成，或者直接拼接HTML）
const $multiEles = [];
for (let i = 0; i < 3; i++) {
  $multiEles.push($(`<div class="all-dynamically-created-elements">动态元素${i+1}</div>`));
}
// 批量添加到DOM
$('body').append($multiEles);
// 逐个处理
$($multiEles).each(function(index) {
  // this指向当前遍历的元素
  $(this).css('color', 'blue').attr('data-index', index);
});

或者更简洁的写法：

const $multiEles = $('<div class="all-dynamically-created-elements"></div><div class="all-dynamically-created-elements"></div><div class="all-dynamically-created-elements"></div>');
$('body').append($multiEles);
$multiEles.each(function() {
  $(this).text('已处理的批量动态元素');
});

场景B：第三方代码创建的元素 #

还是用MutationObserver监听，每次DOM新增节点时，筛选出目标元素批量处理：

const multiEleObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 筛选出所有新增的目标元素
    const $targetEles = $(mutation.addedNodes).filter('.all-dynamically-created-elements');
    if ($targetEles.length > 0) {
      // 逐个处理
      $targetEles.each(function() {
        $(this).addClass('processed').append('（已处理）');
      });
    }
  });
});

const observerConfig = { childList: true, subtree: true };
multiEleObserver.observe(document.body, observerConfig);

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