子元素动态加载时focus触发父元素边框变红的实现方案咨询

方案1：jQuery事件委托（最适配你的技术栈） #

动态元素绑定事件问题直接用jQuery的事件委托机制即可解决，不需要等待目标元素加载完成，只要你委托绑定的父级元素（或更上层的document、body）在页面初始加载时已存在即可。
示例代码（假设父元素类名为parent-container，动态加载的子元素类名为target-child）：

// 直接绑定到已存在的父元素上即可，不用等子元素加载
$('.parent-container').on('focus', '.target-child', function() {
  $(this).parent().css('border', '2px solid red');
});

如果父元素也是动态加载的，可以直接委托到document层级：

$(document).on('focus', '.target-child', function() {
  // 匹配到动态加载的子元素后，找到你要改样式的父元素即可
  $(this).closest('.parent-container').css('border', '2px solid red');
});

注：focus事件默认不冒泡，jQuery内部已做兼容处理，如果你需要更稳妥的冒泡支持，可以把事件名换成focusin。

方案2：原生JS事件委托（无需依赖jQuery） #

如果不想用jQuery，可以用原生的事件监听实现同样的效果：

document.addEventListener('focusin', function(e) {
  // 判断触发事件的元素是不是你要绑定的目标子元素
  if (e.target.matches('.target-child')) {
    // 找到父元素修改样式
    e.target.closest('.parent-container').style.border = '2px solid red';
  }
});

方案3：CSS方案（兼容现代浏览器即可用） #

目前所有主流现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）都已支持CSS :has()伪类，完全可以实现你的需求，不需要写JS：

/* 父元素包含处于focus状态的子元素时，触发样式修改 */
.parent-container:has(.target-child:focus) {
  border: 2px solid red;
}

这个方案完全不需要考虑元素加载时机，只要CSS加载完成即可生效，和你之前想的CSS实现逻辑一致，只是用到了新增的父选择器能力。

备选方案：MutationObserver监听DOM变化 #

如果你不想用事件委托，可以监听DOM的节点插入事件，等目标子元素加载完成后再直接绑定事件：

const observer = new MutationObserver(function(mutations) {
  const targetChild = document.querySelector('.target-child');
  if (targetChild) {
    targetChild.addEventListener('focus', function() {
      this.closest('.parent-container').style.border = '2px solid red';
    });
    // 绑定完成后停止监听，避免性能消耗
    observer.disconnect();
  }
});
// 监听body下的所有DOM变化，也可以缩小监听范围到父元素的容器，提升性能
observer.observe(document.body, { childList: true, subtree: true });

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