jQuery错误无法读取未定义的属性“提交”

Question

在我的代码中，这一步中的所有内容几乎都可以正常工作，但是，代码可以正常工作，但由于某种原因仍然显示我似乎无法修复的控制台问题。

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");
    });

我似乎无法让$(this).form.submit() 正常工作。我收到以下错误：无法读取未定义的属性“提交”

奇怪的是。表单确实最终成功提交，但是由于错误，事件侦听器中的下一行没有通过。谁能帮帮我？

Answer 1

用这一行：

$(this).form.submit();

this 指的是input 发生keypress 的地方。 input 元素没有 form 属性，因此 undefined 和 undefined 没有 submit 方法，因此您的 Cannot read property 'submit' of undefined 错误。

现在，表单最终提交（或至少开始提交）的原因是因为您的 submit 中没有 form 按钮，然后按 ENTER（字符代码 13）会导致 @987654333 @ 在这种情况下。

将行改为：

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

以便找到input 的最近的form 祖先元素，然后调用submit。或者，完全删除该行并让按 ENTER 键启动提交过程，就像它本身所做的那样。

仅供参考：keypress 事件已被弃用。请改用keydown。