jQuery开发待办列表时按回车触发页面刷新的问题排查

核心问题根因 #

• 按键回调逻辑断链：原键盘事件处理代码中仅书写checklist.newItemf;，未补充执行函数的括号语法，仅获取了函数引用并未实际调用，即使阻止了页面刷新行为，也无法触发列表条目添加逻辑。
• 原生表单默认行为未拦截：页面存在<form>标签时，浏览器默认规则为：当表单内仅存在单个文本输入框时，按下回车键会自动触发表单提交，直接引发页面整体刷新。
• 函数执行流程顺序错误：newItem函数中判断输入内容为空时，仅弹出提示但未中断后续DOM操作，即使输入为空，也会向列表中追加带删除图标的空条目。

落地修复方案 #

• 统一绑定表单submit事件，替代零散的window级键盘事件监听。表单的submit事件可同时捕获输入框回车触发、按钮点击触发的提交行为，不需要重复写键盘判断逻辑。
• 在submit事件回调中执行e.preventDefault()，直接拦截浏览器默认的表单提交刷新行为，不需要在form标签上绑定冗余的内联事件属性。
• 调整newItem函数执行顺序：先判断输入内容是否为空，空值时弹出提示并直接中断函数执行，不开展后续DOM元素创建、追加操作。
• 修正函数调用语法，在事件回调中正确触发列表新增逻辑。

修正后完整可运行代码 #

let checklist = (function() {
  function newItem() {
    let inputValue = $('#input').val().trim();
    let input = $('#input');
    // 空值判断，中断后续流程
    if (inputValue === '') {
      alert('You must write something!');
      input.val('');
      return;
    }

    let li = $('<li></li>');
    let deleteIcon = $('<div></div>');

    function crossOut() {
      li.toggleClass('strike');
    }

    function deleteListItem() {
      li.addClass('delete');
    }

    // 有效内容下执行DOM追加
    $('#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
  };
})();

// 统一处理按钮点击、回车触发的提交逻辑
$('form[name="toDoList"]').on('submit', function(e) {
  // 拦截默认表单提交刷新行为
  e.preventDefault();
  checklist.newItemf();
});

// 保留原添加按钮的点击触发逻辑
$('#button').on('click', checklist.newItemf);

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

内容的提问来源于stack exchange，提问作者Andreas C