无法使用jQuery手动触发keydown事件问题咨询

我来帮你排查这个问题，结合你动态添加输入框的场景，主要有几个关键原因和对应的解决办法：

1. 用事件委托处理动态元素的事件绑定 #

你的输入框是通过模板动态添加到页面的，直接用$('.start').keydown(...)这种方式绑定事件，只会对绑定时刻已经存在的DOM元素生效，后续新增的元素不会挂载事件处理函数。

正确的做法是用事件委托，把事件绑定到父级（或document）上，监听动态元素的事件：

// 绑定keydown事件到所有.start和.finish输入框（包括后续动态添加的）
$(document).on('keydown', '.start, .finish', function(event) {
  // 这里写你的事件处理逻辑，比如按下回车的操作
  console.log('Keydown事件触发，按键码：', event.which);
  if (event.which === 13) { // 回车键
    event.preventDefault(); // 阻止默认提交行为
    // 调用添加新part的逻辑（比如你的模板渲染代码）
    addNewPart();
  }
});

2. 手动触发时构造完整的事件对象 #

直接用$('.start').trigger('keydown')触发的事件，默认没有携带按键相关属性（比如which或keyCode），如果你的事件处理函数依赖这些属性判断按键，就会失效。

需要手动构造包含按键信息的事件对象：

// 手动触发keydown事件的示例（比如触发回车键）
function triggerKeydown() {
  // 构造jQuery事件对象，指定按键码
  var keydownEvent = $.Event('keydown');
  keydownEvent.which = 13; // 回车键的按键码，可根据需求修改（比如49对应数字1）
  
  // 选择目标元素触发事件，确保元素已经存在于DOM中
  $('.start:first').trigger(keydownEvent);
}

3. 确认触发时机：元素已存在于DOM #

如果你的触发代码在动态元素添加之前执行，选择器找不到目标元素，自然无法触发事件。比如要在调用addNewPart之后再触发，或者确保元素已经被append到页面中。

结合你代码的完整示例 #

这里补充完善你的添加新part的函数，确保逻辑通顺：

var nextPartNo = 2;

function addNewPart() {
  // 渲染新的part模板
  var newPartHtml = '<div class="part-input">' +
    '<label>Part ' + nextPartNo + '</label>' +
    '<input type="number" class="start" name="s[' + (nextPartNo - 1) + ']" value="" placeholder="start time" tabindex="' + ((nextPartNo - 1)*2 + 3) + '">' +
    '<input type="number" class="finish" name="f[' + (nextPartNo - 1) + ']" value="" placeholder="finish time" tabindex="' + ((nextPartNo - 1)*2 + 4) + '">' +
    '</div>';
  
  // 添加到页面
  $('#part-inputs').append(newPartHtml);
  nextPartNo++;
}

// 绑定事件
$(document).on('keydown', '.start, .finish', function(event) {
  if (event.which === 13) {
    event.preventDefault();
    addNewPart();
  }
});

// 测试手动触发（可取消注释测试）
// setTimeout(function() {
//   triggerKeydown();
// }, 1000);

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