使用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从i输入字段读取并应用于现有的ul元素.但是当我在chrome中尝试它时,我添加的新元素会让我显示半秒并删除.这是我的js代码:

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

Answer 1

表单中的按钮具有默认的提交类型,并且将提交表单,您需要阻止该表单或在按钮上设置不同的类型:

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