如何查找未挂载到DOM的节点的子元素并绑定事件

你不需要等元素挂载到DOM，也不需要依赖节点索引访问子元素，以下几种方案都能稳定实现需求，且不受后续HTML结构调整影响：

• 所有方案均基于jQuery对象的原生能力，内存中未挂载的节点集合同样支持元素查找、事件绑定操作，不存在必须挂载到DOM才能操作的限制。

方案1：直接用jQuery find方法查找目标元素（侵入性最低） #

直接对createCheckBx返回的jQuery包装对象调用.find()，通过选择器定位内部的复选框，和元素是否挂载DOM无关：

const checkBox = createCheckBx("42", "Answer");
// 查找当前容器内的复选框元素，不依赖节点顺序
checkBox.find('input[type="checkbox"]').on("change", (evt) => {
  // 复选框状态切换逻辑
  console.log("当前选中状态：", evt.target.checked);
})

// 后续需要使用时再挂载到DOM即可
$(".container").append(checkBox);

该选择器只匹配容器内的checkbox类型input，就算后续你在复选框前后新增图标、说明文本等节点，也不会导致选择器失效。

方案2：封装方法时直接暴露复选框引用（最稳妥） #

修改createCheckBx的实现，创建元素时就拿到复选框的引用挂在返回对象上，调用方不需要关心内部DOM结构：

function createCheckBx(id, text) {
  const $wrapper = $(`<div>
                    <input id ="${id}" type="checkbox"/>
                    <label for="${id}">${text}</label>
                 </div>`);
  // 直接将复选框的jQuery引用挂载到返回对象上
  $wrapper.$checkbox = $wrapper.find(`#${id}`);
  return $wrapper;
}

调用时直接访问引用即可，不需要自行查找元素：

const checkBox = createCheckBx("42", "Answer");
checkBox.$checkbox.on("change", (evt) => {
  // 业务逻辑
})

就算后续内部HTML结构大幅调整，只要方法内部的引用赋值逻辑正确，外部调用代码不需要做任何修改。

方案3：事件委托绑定（适合批量生成场景） #

如果需要批量生成大量复选框，不需要给每个复选框单独绑定事件，直接在外层容器上绑定委托事件即可，性能更好：

const checkBox = createCheckBx("42", "Answer");
// 给外层容器绑定事件，自动委托给内部的复选框
checkBox.on("change", 'input[type="checkbox"]', (evt) => {
  // 业务逻辑
})

后续如果动态往这个容器里新增其他复选框，不需要重复绑定事件，新元素会自动响应change逻辑。

注意：不要直接对jQuery返回的对象调用原生addEventListener方法，jQuery返回的是DOM元素的包装类数组，不是原生DOM节点。如果一定要用原生方法绑定，需要先取到原生元素：checkBox.find('input[type="checkbox"]')[0].addEventListener(...)，更推荐直接使用jQuery的.on()方法绑定，避免空值报错。

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