在 HTML 表单不工作的情况下使用 on.("submit")答案

【问题标题】：Utilize on.("submit") With HTML Form Not Working在 HTML 表单不工作的情况下使用 on.("submit")
【发布时间】：2021-01-14 15:20:07
【问题描述】：

谁能告诉我为什么这不起作用。

我有一个表格：

<form id="add">
    .
    .
    .
    <button id="button1" type="submit">Submit</button>
</form>

并且希望在提交时以只读方式在表单中进行输入（我知道有更好的方法来实现这一点，但我正在研究这种特定情况）。

为什么这个 jquery 不起作用：

$(document).ready(function(){

    $("#add").on("submit", "input", function(event) {
        console.log("hello");
        event.preventDefault();
        $(this).prop("readonly", true);
    });

});

谢谢！

【问题讨论】：

标签： javascript html jquery forms onsubmit

【解决方案1】：

您将input 作为on 的第二个参数传递，因此实际上是在侦听#add input 上的submit 事件。输入上没有 submit 事件。删除第二个参数，你会没事的。

【讨论】：

#add input => 这样做将不会然后提交表单。
这正是我要说的。 $('#add').on('submit', 'input', ...) 与 $('#add input').on('submit', ...) 相同，（预计第一个会考虑到稍后添加到 DOM 的输入，但这不是重点），这就是它不起作用的原因。
它实际上不一样，显然你是event binding 在作为表单一部分的输入上提交。这意味着您的 eventDelegation 在表单中的输入上 - 因此这样做将始终刷新页面并且不会提交表单也不会将道具设置为只读。简而言之，它不会做任何事情。你可以试试这个例子。
我知道。我只是在解释 OP 做了什么以及为什么它不起作用。我需要重复多少次？

【解决方案2】：

您实际上并没有在提交事件时在您的inputs 上添加readonly 属性，但$(this) 实际上是指整个HTML form - 您不能对其应用只读属性。

为什么您的示例不起作用：您正在将表单提交事件绑定到作为表单一部分的输入。这意味着您的eventDelegation 位于表单中的inputs 上，submit 处理程序是一个按钮type="submit"- 所以这样做将始终刷新页面并且不会提交nor 形式将 prop 设置为 readonly。简而言之，它根本不会做任何事情，因为eventDelegation 不正确。

要在表单提交上启用所有输入readyOnly，您可以使用.find() 方法jQuery 并查找所有:input，包括任何textarea（如果您也有）。

$(this).find(':input').prop("readonly", true); //prop all readonly

另外，您不需要也需要在提交事件函数中添加input。

工作演示：

$(document).ready(function() {
  $("#add").on("submit", function(event) {
    event.preventDefault();
    $(this).find(':input').prop("readonly", true); //prop all readonly
    console.log("form submitted - all inputs are readonly now");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<form id="add">
  <input class="form-control" type="text" value="Some value" />
  <br>
  <input class="form-control" type="text" value="Some other value" />
  <br>
  <textarea class="form-control">I am a textarea</textarea>
  <br>
  <button class="btn btn-success" id="button1" type="submit">Click me to submit</button>
</form>

【讨论】：