监听表单提交[重复]

Question

我需要在我的网站上提交表单时进行注册，无论何时何地 - 它可能是动态加载或创建的表单 - 我需要能够知道何时任何表单是关于在页面上提交。由于上述原因，事件侦听器在这里根本不是一个选项。

我在想我还有哪些其他选项，例如，如果我想捕获按钮的点击，我可以在文档中添加一个点击侦听器并检查 event.target 以确定按钮是否已被单击而不向每个特定按钮添加侦听器。我希望我可以对表单提交做同样的事情，但我没有找到合适的事件来监听文档。

想到的另一个解决方案是扩展HTMLFormElement原型并添加一个默认的onclick函数，例如

HTMLFormElement.prototype.onsubmit = function (e) {
    console.log(e);
}

不幸的是，这也是不可能的，在不同的浏览器中出现各种错误，例如

• TypeError：在未实现接口 HTMLElement 的对象上调用了“set onsubmit”。
• 未捕获的类型错误：非法调用

我的想法不多了，这不可能吗？

编辑：这个问题显然不是重复的，正如我在我的第一个想法中所描述的那样，确切地说是在建议问题的已接受答案中陈述的内容，我不知道如何在我的案例。

Answer 1

此代码不适用于snippets（因为 sn-ps 不允许提交表单），所以我没有创建，但它会在您的站点中：

$(document).on('submit', 'form', function(e) {
  e.preventDefault();
  console.log('Form submitted');
});
$('body').append($('<form action=""><input type="submit" value="Submit dynamic form" /></form>'));

我使用preventDefault 只是为了确保不会提交表单。您可以在代码中删除它。

这是一个有效的 jsfiddle：
https://jsfiddle.net/dekelb/gr94dg7q/

更新 - vanilla javascript 解决方案：

document.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('Form submitted');
});

$('body').append($('<form action=""><input type="submit" value="Submit dynamic form" /></form>'));

请注意，相关的 javascript (no-jquery) 是针对 submit 事件的，它与下一行无关（关于向文档添加新表单）。