如何找到一个节点的子元素，这是不附加到dom?

Question

我使用jquery和es6模板字符串创建了一个带有标签的复选框:

function createCheckBx(id, text) {
return $(`<div>
<input id ="${id}" type="checkbox"/>
<label for="${id}">${text}</label>
</div>`);
}

现在我想给

复选框附加一个事件监听器

checkBox = createCheckBx("42", "Answer");
cb.???.addEventListener("change", (evt) => {
// do smth. when toggled
})

，但div没有附加到dom，所以我不能使用document.getElementById(或jquery的$("#...")，我不想通过任何类型的索引访问它，如cb.childNodes[0]，因为调用者不能知道索引和html结构可能会改变。任何帮助吗?

敬上，AJ

Answer 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的函数中删除了id属性。这是因为在运行时创建id是一种反模式，应该避免。使用通用类代替。

还请注意，创建一个委托事件处理程序来处理所有动态附加的内容，而不是在创建新元素时附加一个事件，可能会更好地为您服务。下面是一个示例:

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>