动态添加输入框后音译功能仅首个生效，如何解决？

这个问题我之前踩过坑，核心原因就是音译功能是靠固定ID绑定单个元素的，动态新增的输入框没法自动被识别到。下面给你几个实用的解决思路，你可以根据自己的代码情况选：

方案1：类选择器+事件委托（最推荐） #

如果你的音译是输入时自动触发的，把原来的ID选择器换成类选择器，然后用事件委托把事件绑定到父容器上——这样不管新增多少行，新输入框触发输入事件时都会被父容器捕获到，进而执行音译逻辑。

举个代码例子：

// 先找到所有输入框的父容器（比如表格tbody、包裹div）
const inputContainer = document.getElementById('input-wrapper');

// 绑定事件到父容器，监听子元素的input事件
inputContainer.addEventListener('input', function(e) {
  // 确认触发事件的是我们的音译输入框
  if (e.target.classList.contains('transliterate-input')) {
    // 执行音译逻辑，e.target就是当前正在输入的那个框
    doTransliteration(e.target.value, e.target);
  }
});

然后动态新增行的时候，给新输入框加上transliterate-input类：

function addNewRow() {
  const newInput = document.createElement('input');
  newInput.classList.add('transliterate-input');
  // 其他必要的属性设置（比如name、placeholder）
  inputContainer.appendChild(newInput);
}

方案2：新增元素后手动绑定 #

如果音译功能需要主动调用初始化方法（比如第三方插件的init函数），那就在每次新增行之后，找到刚创建的输入框，手动给它初始化音译功能。

比如：

function addNewRow() {
  // 创建新输入框，给个动态唯一ID（可选，方便插件识别）
  const newInput = document.createElement('input');
  newInput.id = `trans-input-${Date.now()}`;
  
  // 把输入框加到页面
  inputContainer.appendChild(newInput);
  
  // 手动调用音译初始化方法，传入新输入框的ID或元素本身
  initTransliteration(newInput.id); // 假设这是插件的初始化方法
}

方案3：修改音译功能的底层逻辑（有权限时用） #

如果这个音译功能是你自己开发的，或者能修改源码，可以把原来依赖单个ID的逻辑改成支持批量元素的：

// 原来的单个初始化逻辑
function initTransliteration(elementId) {
  const input = document.getElementById(elementId);
  input.addEventListener('input', () => {
    // 原来的音译处理
  });
}

// 修改成支持批量选择的版本
function initTransliteration(selector) {
  const inputs = document.querySelectorAll(selector);
  inputs.forEach(input => {
    input.addEventListener('input', () => {
      // 音译处理逻辑
      input.nextElementSibling.textContent = transliterate(input.value);
    });
  });
}

// 初始化现有所有输入框
initTransliteration('.transliterate-input');

// 新增行后，直接给新元素绑定
function addNewRow() {
  const newInput = document.createElement('input');
  newInput.classList.add('transliterate-input');
  inputContainer.appendChild(newInput);
  // 或者直接调用初始化方法传入这个元素
  initTransliteration(newInput);
}

另外补充一句：如果是用第三方音译插件，先去看插件文档，很多插件会提供refresh或者reinit这类方法，调用一下就能重新扫描页面元素，自动绑定新添加的输入框。

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