当按下enter时如何在jquery的待办事项列表中添加新项目

Question

我是jquery的新手，需要一些帮助来使待办事项列表在按Enter时添加新项目。 当您单击该按钮时，它的工作正常，但是按Enter键则什么也没有发生。 任何帮助都非常感谢。

<!DOCTYPE html>
<html>
<head>


  </head>
<body>

<form name="toDoList">
  <input type="text" id="listItem" name="ListItem" />
</form>
<ol>
</ol>
<button id="btn2">Add something</button>
<p>something</p>
<p>ldldl</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(function() {
  $("#btn2").click(function() {
    var toAdd = $("#listItem").val();
    $("ol").append("<li>" + toAdd + "</li>");
  });
  $("#listItem")keydown(function(e) {

  if (e.which === 13) {

      var toAdd = $("#listItem").val();
      $("ol").append("<li>" + toAdd + "</li>");
    }
  });
});

$(document).on('dblclick', 'li', function() {
  $(this).toggleClass('strike').fadeOut('slow');
});



</script> 


</body>
</html>

Answer 1

在嵌套方法.keydown缺少点
您缺少了一个event.preventDefault ，它会阻止表单提交：

 $(function() { $("#btn2").click(function() { var toAdd = $("#listItem").val(); $("ol").append("<li>" + toAdd + "</li>"); }); $("#listItem").keydown(function(e) { if (e.which === 13) { e.preventDefault(); // Don't submit the form $("ol").append("<li>" + this.value + "</li>"); // append this.value this.value = ""; // reset the value field } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="toDoList"> <input type="text" id="listItem" name="ListItem" /> </form> <ol> </ol> <button id="btn2">Add something</button>

可是

 $(function() { var $input = $("#listItem"), $list = $("ol"); // Don't repeat yourself. Use functions! function addListItem(e) { if(e.type==="keydown" && e.which !== 13) return; e.preventDefault(); // Don't submit form $list.append("<li>" + $input.val() + "</li>"); $input.val(""); // Reset input field } $("#btn2").click(addListItem); $("#listItem").keydown(addListItem); // See the beauty? now you know they both perform the same // addListItem() task and you only have to change the code in one place });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="toDoList"> <input type="text" id="listItem" name="ListItem" /> </form> <ol></ol> <button id="btn2">Add something</button>

当按下enter时如何在jquery的待办事项列表中添加新项目

问题描述

1 个解决方案

解决方案1
0 2017-01-29 09:39:06

当按下enter时如何在jquery的待办事项列表中添加新项目

问题描述

1 个解决方案

解决方案1 0 2017-01-29 09:39:06

解决方案1
0 2017-01-29 09:39:06