当通过javascript .submit提交for时防止在jquery中提交表单答案

【问题标题】：Preventing form submission in jquery when for is submitted through javascript .submit当通过javascript .submit提交for时防止在jquery中提交表单
【发布时间】：2020-12-22 23:43:20
【问题描述】：

我正在尝试使用 JS 中的 event.preventDefault() 阻止表单提交。虽然这在标准表单提交上工作正常，但当表单由 JS 从外部提交时，它似乎并没有停止提交。

这是我正在使用的示例 HTML 表单：

<form id="demo12" method="post">
    <input type="hidden" id="testID" name="testID" value="42">
</form>

<a href="javascript:{}" onclick="document.getElementById('demo12').submit();">Click this sentence to submit the form</a>

这里是包含的 javascript/jquery 文件，它试图捕获正在提交的表单：

$("[id^='demo']").submit(function (event) {
    event.preventDefault();
    // Then there is some ajax code here
}

由于通过 Jinja 添加的表单的性质，有多种类似的表单。我想在 id 字段中捕获任何以“demo”开头的表单并运行一些 AJAX 以从服务器获取一些新信息。

这在过去对我有用，但唯一的区别是没有提交按钮，而是通过 html 超链接标记单独提交表单。像这样提交表单提交的时候，JQuery是无法捕捉到表单提交的事件吗？

目前，当我这样做时，它只是将表单发布到同一个 html 页面，并且 jquery 函数从未发生过。我确实在浏览器中通过调试看到 jquery 正在正确侦听并将表单识别为它正在侦听以提交的内容。

【问题讨论】：

在原生 <form> 上调用 submit() 会绕过提交事件的任何 jQuery 事件处理程序。
你可以尝试重新定义HTMLFormElement.prototype.submit。
@Barmar 我正要建议这个，除了只在实际的表单元素上重新定义
@ControlAltDel 我在发表评论后想到了这一点，尽管他说有很多这样的元素。因此，重新定义原型并让函数检查它是否是特殊元素之一可能会更容易。

标签： javascript html jquery forms

【解决方案1】：

$('[data-submit]').on('click', e => {
  $(e.target.dataset.submit).trigger('submit');
});

$('#demo12').on('submit', e => {
  console.log('you submitted me!');
  e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="demo12" method="post">
    <input type="hidden" id="testID" name="testID" value="42">
</form>

<a href="javascript:{}" data-submit="#demo12">Click this sentence to submit the form</a>

不是调用原生的提交事件，而是在表单上触发提交事件。这样，您就可以处理它并有条件地取消它。

【讨论】：