使用jQuery在ul中添加li元素

Question

我正在尝试制作一个简单的任务清单。这是我的html代码：

<form>
   Task: <input type="text" name="task" id="input">
   <button>Submit</button>
</form>

<br>

<h2>What you need to do</h2>
<ul id="list">

</ul>

我尝试使用jQuery从输入字段中读取内容并将其添加到现有的ul元素中。但是当我在Chrome中尝试时，新添加的元素仅会显示半秒钟就会消失。
以下是我的JavaScript代码：

  $(document).ready(function() {
    $('button').click(function() {
            var new_task = $('#input').val();
            $('#list').append('<li>'+new_task+'</li>');
    });
  });

- SuperManEver

---

当您单击按钮时，表单将被提交，因此页面将重新加载。 - nix

http://jsfiddle.net/ishankdubey/QBrPn/ - Ishank

Answer 1

表单中的按钮默认类型为提交，将会提交表单。如果需要阻止提交或者在按钮上设置其他类型，可以进行以下处理：

$(document).ready(function() {
    $('button').on('click', function(e) {
        e.preventDefault();
        var new_task = $('#input').val();
        $('#list').append('<li>'+new_task+'</li>');
    });
});

- adeneo

---

我还会在.append()调用之后添加$('#input').val('');以提高可用性。 - Zim84

@adeneo 为什么每个人都坚持使用 preventDefault() 而不是 return false;？返回 false 还有一个额外的好处，它还会在 jQuery 中调用 stopPropagation()。 - Precastic

@Precastic - 这是因为我们中的一些人认为，当我们真正想要做的只是防止默认操作时，返回false是对返回运算符的滥用，而preventDefault则是正确的工具。 - adeneo

顺便提一下，这也是为什么你几乎总能在 jQuery 文档中找到 preventDefault 而不是 return false 的原因，例如 on() 方法的文档。 - adeneo

@adeneo 好的。谢谢。需要注意的是，jQuery仅在文档中描述这两个函数之间的区别;) - Precastic

@Precastic - 我想这有点正确，因为文档应该描述它们之间的区别，而且它还提到返回false是两者的快捷方式。对于这个例子来说，我们使用哪个并不重要，但我们不需要返回任何东西，也不需要停止传播，我们只需要阻止默认操作，所以为什么不使用能够实现这一点的方法呢？ - adeneo

Answer 2

请尝试这个。

HTML（超文本标记语言）。

<form>
  Task: <input type="text" name="task" id="input">
  <button>Submit</button>
  <br>

 <h2>What you need to do</h2>
 <ul id="list">

 </ul>
</form>

JS

$(document).ready(function() {
 $('button').click(function() {

  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  return false;
 });
});

Demo

- Amit

Answer 3

你必须在函数末尾使用return false;：

$('button').click(function() {
  var new_task = $('#input').val();
  $('#list').append('<li>'+new_task+'</li>');
  return false;   // This is new line of code
});

- Precastic