提问人：jam 提问时间：7/13/2022 最后编辑：jam 更新时间：7/13/2022 访问量：58
如何找到节点的子元素，该子元素未附加到dom？
How to find a subelement of a node, which is not attached to the dom?
问：
我使用 jquery 和 es6 模板字符串创建一个带有标签的复选框：
function createCheckBx(id, text) {
return $(`<div>
<input id ="${id}" type="checkbox"/>
<label for="${id}">${text}</label>
</div>`);
}
现在我想将一个 eventlistener 附加到复选框
checkBox = createCheckBx("42", "Answer");
cb.???.addEventListener("change", (evt) => {
// do smth. when toggled
})
但是 div 还没有附加到 dom，所以我不能使用（或 jquery，我不想通过任何类型的索引访问它，因为调用者无法知道索引并且 html 结构可能会更改。有什么帮助吗？document.getElementById $("#...")cb.childNodes[0]
亲切的问候，AJ
答：
0赞
Rory McCrossan
7/13/2022
#1
仅仅因为该元素在 DOM 中尚不存在并不意味着您不能将事件处理程序附加到它。示例中唯一的问题是混合 jQuery 和纯 JS 方法时使用的语法。你应该坚持其中之一。
当您在页面中包含 jQuery 时，以下是如何使您的示例工作：
let createCheckBox = text => $(`<div><label><input type="checkbox" />${text}</label></div>`);
let $checkBox = createCheckBox("Answer");
$checkBox.on('change', e => {
console.log(`Checkbox checked? ${e.target.checked}`);
});
// add the checkbox to the DOM at some point:
$('body').append($checkBox);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>请注意，我从创建元素的函数中删除了该属性以及它生成的 HTML。这是因为在运行时创建是一种反模式，应避免。请改用 common 类。idid
另请注意，创建单个委托事件处理程序来处理所有动态追加的内容，而不是在创建新元素时附加事件，可能会更好地为您服务。下面是如何执行此操作的示例：
let createCheckBox = text => $(`<div><label><input type="checkbox" />${text}</label></div>`);
let $container = $('.checkbox-container');
$('button').on('click', e => $container.append(createCheckBox("Answer")));
$container.on('change', ':checkbox', e => {
console.log(`Checkbox checked? ${e.target.checked}`);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button type="button">Add</button>
<div class="checkbox-container"></div>
评论