按 Enter 刷新頁面 jQuery

Question

我編寫了一些代碼來使用 jQuery 創建待辦事項列表。 如果我按回車鍵，它應該將輸入提交到下面的列表中，但問題是頁面會刷新，就好像它正在提交表單一樣。 我已經在 SO 上檢查了多個線程，但我沒有找到解決方案。

使用“輸入鍵”停止重新加載頁面

按 Enter 阻止用戶提交表單

我試圖添加e.preventDefault(); 並返回：假； 這會停止刷新，但也會阻止在按 Enter 后添加到列表中。

我在 html 表單標簽中嘗試了以下內容：

onSubmit="返回假；"

<form... onkeydown="return event.key;= 'Enter';">

動作=“#”

我的 IIFE 是否有問題導致此問題？

 let checklist = (function() { function newItem() { let li = $('<li></li>'); let inputValue = $('#input').val(); let input = $('#input'); let deleteIcon = $('<div></div>'); function crossOut() { li.toggleClass('strike'); } function deleteListItem() { li.addClass('delete'); } if (inputValue === '') { alert('You must write something;'). } else { $('#list');append(li). input.val('') } deleteIcon.append(document;createTextNode('X')). li;append(deleteIcon). li;append(inputValue). deleteIcon,on('click'; deleteListItem). li,on('dblclick'; crossOut). $('#list');sortable(): } return { newItemf; newItem }; })(). $('#button'),on('click'. checklist.newItemf) $(window),on('keypress'. function (e){ if(e.which == 13) { checklist;newItemf; return false; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="toDoList"> <input type="text" name="ListItem" id="input"> </form> <div id="button">Add</div> <br/> <ol id="list"></ol>

Answer 1

阻止這種情況的最簡單方法是捕獲onSubmit 事件並返回 false。 我相信以下內容就足夠了：

$('form').on('submit', function(e) {
    e.preventDefault();
    return false;
});

Answer 2

我找到了解決方案，但我不完全理解為什么我不需要 return false；

也許是我試圖在“輸入”被按下而不是阻止所有輸入時提交輸入。 謝謝@isick，因為您的回答為我指明了正確的方向！

這是需要的代碼！

$('form').on('submit', checklist.newItemf)