JS动态创建Input后自动聚焦下一个功能失效问题求助

这个问题我之前也碰到过！核心原因是你原来的事件绑定方式只对页面加载时已经存在的输入框生效，动态新增的元素并没有被绑定上keypress事件——因为代码在初始执行时，这些新增元素还不存在呢。

要解决这个问题，我们需要用事件委托（利用DOM的事件冒泡机制），把事件绑定到一个始终存在的父元素上（比如document，或者更贴近输入框的容器），这样不管是初始的还是后续动态创建的输入框，触发事件时都会冒泡到父元素，从而执行自动聚焦的逻辑。

基础版代码（绑定到document） #

// 用事件委托替代直接绑定
$(document).on('keypress', ':input', function(e) {
  // 获取当前所有输入框的最新列表
  var inputs = $(':input');
  // 找到当前输入框的下一个元素
  var nextInput = inputs.get(inputs.index(this) + 1);
  if (nextInput) {
    nextInput.focus();
  }
});

优化版代码（绑定到指定容器） #

如果你的所有输入框都在一个固定的容器里（比如<div id="input-container"></div>），建议把事件绑定到这个容器上，比绑定到document更高效：

// 先获取容器元素
var $inputContainer = $('#input-container');

// 绑定事件到容器，监听内部的输入框keypress事件
$inputContainer.on('keypress', ':input', function(e) {
  // 只获取容器内的输入框，范围更精准
  var $inputs = $inputContainer.find(':input');
  var nextInput = $inputs.get($inputs.index(this) + 1);
  if (nextInput) {
    nextInput.focus();
  }
});

原理说明 #

• 你原来的代码是直接绑定：页面加载时找到所有:input元素，给每个元素单独绑定keypress事件，后续新增的元素不会自动带上这个事件。
• 事件委托是委托绑定：把事件处理逻辑交给父元素，父元素会监听所有子元素（包括未来动态添加的）触发的keypress事件，当事件冒泡到父元素时，再判断触发事件的元素是不是输入框，然后执行对应的逻辑。

这样修改后，不管你用createElement()新增多少个输入框，自动聚焦的功能都能正常工作啦！

内容的提问来源于stack exchange，提问作者David Stančík