如何在未附加到 DOM 的节点上查找子元素并绑定事件？-html教程-PHP中文网

如何在未附加到 dom 的节点上查找子元素并绑定事件？

本文将探讨如何在 JavaScript 环境下，特别是使用 jQuery 时，处理未附加到 DOM 的元素的子元素，并为其绑定事件。通常，我们会使用 document.getElementById 或 jQuery 的 $("#...") 来查找元素，但这在元素尚未添加到 DOM 时是行不通的。本教程将介绍几种解决此问题的方法。

直接绑定事件

即使元素尚未添加到 DOM，也可以使用 jQuery 的 on() 方法直接在其上绑定事件。这种方法避免了必须先将元素添加到 DOM 才能绑定事件的限制。以下是一个示例：

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}`);
});

// 在某个时刻将 checkbox 添加到 DOM：
$('body').append($checkBox);

在这个例子中，createCheckBox 函数创建一个包含 checkbox 的 jQuery 对象。然后，我们使用 $checkBox.on('change', ...) 直接为这个 checkbox 绑定了一个 change 事件监听器。当 checkbox 被添加到 DOM 并且状态改变时，事件监听器会被触发。

注意事项：

确保在将元素添加到 DOM 之前绑定事件。
这种方法适用于少量动态创建的元素。

使用事件委托

对于大量动态创建的元素，使用事件委托是一种更高效的方法。事件委托允许你将事件监听器绑定到父元素，然后监听来自其子元素的事件。以下是一个示例：

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}`);
});

在这个例子中，我们将 change 事件监听器绑定到 checkbox-container 类名的容器元素上。当容器内的任何 checkbox 的状态改变时，事件监听器会被触发。':checkbox' 选择器用于过滤事件，只处理来自 checkbox 的事件。

优点：

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

性能更好，特别是对于大量动态创建的元素。
代码更简洁，易于维护。

注意事项：

需要选择合适的父元素来绑定事件监听器。
使用合适的选择器来过滤事件，只处理来自特定子元素的事件。

避免运行时动态生成 ID

在创建动态元素时，应避免在运行时动态生成 ID 属性。动态生成的 ID 容易导致命名冲突和维护困难。相反，应使用 class 属性来标识元素。例如：

// 不推荐：
let createCheckBox = (id, text) => $(`<div><label><input id="${id}" type="checkbox">${text}</label></div>`);

// 推荐：
let createCheckBox = text => $(`<div><label><input type="checkbox" class="my-checkbox">${text}</label></div>`);

然后，可以使用 class 选择器来查找元素或绑定事件。