如何为AJAX动态添加的重复表单textarea绑定keyup提交事件

首先明确：HTML规范要求ID必须唯一，你当前代码里多个元素用了相同ID（表单、textarea、隐藏input），这会导致选择器无法正确选中所有目标元素，是核心问题。

再看你尝试的两种写法的错误：

• 第一种绑定到#response的keyup事件，closest()是向上查找祖先元素，但[name=clientNotitieDatum]是后代元素，而且input本身没有submit()方法，只有form元素才有提交功能。
• 第二种选择器写错了，应该是textarea而非text，而且因为ID重复，用ID选择器只能获取第一个匹配元素。

下面是修正后的完整实现：

修正后的HTML代码 #

<div id="response">
  <div id="child_response">

    <form action="test.php" method="post" class="notitieForm" onsubmit="return notitieOpslaan();">
      <input type="text" class="clientNotitieDatum" value="2022-10-17" name="clientNotitieDatum" hidden="">
      <textarea rows="4" cols="50" class="ingevuldNotitie" name="ingevuldNotitie"></textarea>
      <input type="submit" name="clientNotitie" value="Notitie opslaan">
    </form>

    <form action="test.php" method="post" class="notitieForm" onsubmit="return notitieOpslaan();">
      <input type="text" class="clientNotitieDatum" value="2022-10-18" name="clientNotitieDatum" hidden="">
      <textarea rows="4" cols="50" class="ingevuldNotitie" name="ingevuldNotitie"></textarea>
      <input type="submit" name="clientNotitie" value="Notitie opslaan">
    </form>

  </div>
</div>

修正后的JavaScript代码 #

// 监听所有目标textarea的keyup事件
$(".ingevuldNotitie").on("keyup", function () {
  // 找到当前textarea所属的表单并提交
  $(this).closest('form').submit();
});

// 保留原有的提交验证函数（注意需返回true才能完成提交）
function notitieOpslaan() {
  // 可在此添加表单验证逻辑，比如检查输入内容是否合法
  // 验证通过返回true，否则返回false阻止提交
  return true;
}

关键说明 #

• 将重复的ID替换为class，既符合HTML规范，又能批量选中所有目标元素。
• 使用jQuery的on()方法绑定事件（替代已不推荐的bind()，兼容性和灵活性更好）。
• closest('form')会向上查找当前元素最近的form祖先，确保提交的是当前输入所在的表单，不会混淆两个表单。

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