Javascript jQuery错误无法读取属性'；提交'；未定义的

在我的代码中，在这一步中，我几乎让所有的东西都工作了，然而，代码工作了，但是出于某种原因，仍然显示出一个控制台问题，我似乎无法修复

index.ejs

<%- include("partials/header") %>

<div class="container my-5">
    <div class="row justify-content-center">
            <div class="card bg-dark" style="width: 18rem;">
                <div class="card-header text-white">
                    To-Do List
                    <a href="#collapseToDo" data-toggle="collapse"><i class="fas fa-plus ml-auto"></i></a>
                </div>

                <ul class="list-group list-group-flush">
                    <div class="collapse" id="collapseToDo">
                            <form class="" action="/" method="POST">
                                <input class="list-group-item bg-light rounded-0" name="todo" type="text" placeholder="Enter To-Do"/>
                            </form>
                    </div>
                    <% todos.forEach(function(todos){ %>
                    <li class="list-group-item"><%= todos.title %> <form action="/<%= todos._id %>?_method=DELETE" method="POST"><button><i class="far fa-trash-alt"></i></button></form></li>
                    <% }) %>
                </ul>
            </div> 
    </div>
</div>

<%- include("partials/footer") %>

待办事项清单

dom.js

$("ul").on("click", "button", function(event){
    $(this).parent().parent().fadeOut(500, function(){
        $(this).remove();
    });
    event.stopPropagation();
});

    $("input[type='text']").keypress(function(event){
        if(event.which === 13){
          var todoText = $(this).val(); 
          $(this).form.submit();
          $(".list-group").append("<li class='list-group-item'>" + todoText + "<span><i class='far fa-trash-alt'></i></span></li>");
          $(this).val("");
        }
    });

    $(".list-group").on("click", "li", function(){ 
        $(this).toggleClass("completed");
    });

$（“ul”）。在（“单击”，“按钮”，功能（事件）{
$（this.parent（）.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。按键（函数（事件）{
if（event.which==13）{
var todoText=$（this.val（）；
$（this.form.submit（）；
$（“.list-group”）.append（“
”+todoText+”
”）；
$（此）.val（“”）；
}
});
$（“.list group”）。在（“单击”，“li”，函数（）{
$（此）.toggleClass（“已完成”）；
});

我似乎无法使

$（this）.form.submit（）

正常工作，而不会出现任何错误。我遇到以下错误：无法读取未定义的属性“submit”

奇怪的是。表单最终确实成功提交，但是由于错误，eventlistener中的下一行无法通过。有人能帮我吗？

用这句话：

$(this).form.submit();

此

指出现

按键的
输入
<代码>输入

元素没有

表单

属性，因此

未定义

和

未定义

没有

提交

方法，因此

无法读取未定义

错误的属性“提交”

现在，表单最终提交（或至少开始提交）的原因是，您的

表单中没有
submit
按钮，在这种情况下，按ENTER键（字符代码13）会导致
submit

将行更改为：

$(this).closest("form").submit();

因此，将找到
输入
的最近的
表单
祖先元素，然后对该元素调用
提交
。或者，完全删除该行，然后按ENTER键开始提交过程，就像它本机一样

仅供参考：
keypress
事件已被弃用。请改用
keydown
。
谢谢您的快速回复！您所说的一切都很有道理，但是我最终遇到了一个奇怪的问题，即输入的全部值现在没有随表单一起提交。最后，我的数据库中添加了一个空字符串。@YaadMohammad好吧，我认为这只是您决定在这次活动中提交表单的问题。如果在关键事件期间提交表单，则不会给用户在提交表单之前完成数据输入的机会。如果使用
keydown
，则在将字符添加到控件之前会触发事件。（我知道我说过用它来代替按键，但我并没有从代码的角度考虑全局。）。要解决此问题，请使用
input
元素的
change
事件，因为它仅在控件失去焦点且值已更改时触发。