jQuery 錯誤無法讀取未定義的屬性“提交”

Question

我幾乎在我的代碼中的這一步中使所有內容正常工作，但是，代碼可以工作，但由於某種原因仍然顯示我似乎無法修復的控制台問題。

索引.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是指發生keypress的input 。 input元素沒有form屬性，因此undefined和undefined沒有submit方法，因此您Cannot read property 'submit' of undefined錯誤的Cannot read property 'submit' of undefined 。

現在，表單最終提交（或至少開始提交）的原因是因為您的form沒有submit按鈕，並且在這種情況下按 ENTER（字符代碼 13）會導致submit 。

將該行更改為：

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

以便找到input的最近的form祖先元素，然后將調用submit 。 或者，完全刪除該行並讓按下 ENTER 鍵開始提交過程，就像它本機所做的那樣。

僅供參考： keypress事件已被棄用。 請改用keydown 。