使用回车键向列表应用程序添加项目导致其他功能无法正常工作

Question

列表应用程序工作得很好，直到我为回车键添加了按键。只有在

newItem()

函数之外我才能让它工作。当我在

newItem()

函数中使用 keydown 函数时，输入字段会被清除，我不会收到任何错误，但不会提交任何内容。

我的问题是，当我将 keydown 函数放在

newItem()

函数之外时，

crossOutButton()

、strike css 功能和

sortable()

不起作用，因为它们现在超出了范围。我猜有一个解决方案可以将其全部放入

newItem()

函数中，但我被困住了。

function newItem() {

  //Adds new item to the list
  let li = $('<li></li>');
  let inputValue = $('#input').val();
  li.append(inputValue);

  if (inputValue === '') {
    alert('You must write something');
  } else {
    $('#list').append(li);
    //clears input field after selecting 'Add' button
    $('#input').val('');
  }

  //Crossing out an item from the list of items
  function crossOut() {
    li.toggleClass('strike');
  }

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

  //Adding the delete button 'X'
  let crossOutButton = $('<crossOutButton></crossOutButton>');
  crossOutButton.append(document.createTextNode('X'));
  li.append(crossOutButton);

  crossOutButton.on('click', deleteListItem);
  //Adding class delete (display: none) from css
  function deleteListItem() {
    li.addClass('delete');
  }

  //reordering the items
  $('#list').sortable();

}

//keydown function to listen for enter key
$(document).ready(function() {
  $('#input').keydown(function(e) {

    //initialized variable and set as undefined
    let inputValue;

    if (inputValue === '') {
      alert("You must enter something");
    } else {
      //Enter key holds the value of 13
      if (e.keyCode === 13) {
        let li = `<li>${$(this).val()}</li>`;
        $('#list').append(li);
        console.log('Form submitted');

        e.preventDefault();
        //clears input field after hitting enter
        $('#input').val('');
      }
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form name="toDoList">
  <input type="text" name="listItem" id="input">
</form>

<div onclick="newItem()" id="button">Add</div>
<br/>
<ol id="list"></ol>

Answer 1

捕获回车键（实际上是捕获按钮单击）的正确方法是捕获表单的

submit

事件（并取消它）。

提示：不要在代码中重复自己。

function newItem() {

  //Adds new item to the list
  let li = $('<li></li>');
  let inputValue = $('#input').val();
  li.append(inputValue);

  if (inputValue === '') {
    alert('You must write something');
  } else {
    $('#list').append(li);
    //clears input field after selecting 'Add' button
    $('#input').val('');
  }

  //Crossing out an item from the list of items
  function crossOut() {
    li.toggleClass('strike');
  }

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

  //Adding the delete button 'X'
  let crossOutButton = $('<crossOutButton></crossOutButton>');
  crossOutButton.append(document.createTextNode('X'));
  li.append(crossOutButton);

  crossOutButton.on('click', deleteListItem);
  //Adding class delete (display: none) from css
  function deleteListItem() {
    li.addClass('delete');
  }

  //reordering the items
  $('#list').sortable();

}

ol li {
  padding: 5px;
  margin: 5px;
  border: 1px solid gray;
  background: white;
  cursor: move;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>


<form name="toDoList" onsubmit="newItem(); return false">
  <input type="text" name="listItem" id="input">
  <button id="button">Add</button>
</form>


<br/>
<ol id="list"></ol>