动态克隆新增的textarea内文本颜色修改功能失效如何解决

数据老陈

2026-10-6

问题根因

你的推测是准确的：cloneNode()方法默认不会复制原节点上通过addEventListener绑定的事件监听器；如果使用jQuery的on方法仍未生效，通常是绑定对象错误，直接绑定到textarea选择器只会作用于页面初始化时已存在的节点。

最简解决方案

场景1：所有textarea统一使用选中的文本颜色

直接操作全局样式，不需要给单个textarea绑定事件，克隆的节点自动生效：

提前在CSS中定义变量引用文本颜色

textarea {
  color: var(--textarea-text-color, #000000);
}

颜色选择器修改时更新全局变量即可

document.querySelector('#color-picker').addEventListener('change', (e) => {
  document.documentElement.style.setProperty('--textarea-text-color', e.target.value);
});

场景2：每个textarea可单独设置文本颜色

使用事件委托机制，将事件绑定到所有克隆节点的共同静态父容器上：

// 替换为实际的父容器选择器，该容器必须是页面加载时就存在、不会被动态删除的元素
document.querySelector('#textarea-container').addEventListener('change', (e) => {
  // 匹配对应颜色选择器的触发事件
  if (e.target.matches('.textarea-color-picker')) {
    // 找到当前选择器对应的textarea节点
    const targetTextarea = e.target.closest('.cloned-item').querySelector('textarea');
    targetTextarea.style.color = e.target.value;
  }
});

如果是使用jQuery的场景，正确的绑定写法如下：

// 必须绑定到静态父容器，第二个参数传入目标元素选择器
$('#textarea-container').on('change', '.textarea-color-picker', function() {
  $(this).closest('.cloned-item').find('textarea').css('color', $(this).val());
});