按 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)