使用jquery在ul中添加li元素

I try make simple todo list. This is my html code:

我尽量列出简单的待办事项。这是我的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>

Then I try use jquery to read from i input field and apppend to existing ul element. But when i try it in chrome my new added element show me for half of second and remove. Here is my js code:

然后，我尝试使用jquery从I输入字段中读取，并将apppend加载到现有的ul元素中。但是当我在chrome上尝试的时候，我的新添加的元素会在半秒内显示并删除。以下是我的js代码:

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

4 个解决方案

#1

A button inside a form has a default type of submit, and will submit the form, you need to prevent that or set a different type on the button :

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

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

#2

Try this

试试这个

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>

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

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

Demo

演示

#3

You must return false; at the end of your function:

你必须返回false;在你的职能结束时:

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

#4

-2

Hey Nikita your code is not having any error, but the thing is that when u click on button your javascript is running properly and it also adding li to div list but similarly your page is get submitted this happening because of two main thing

嘿，尼基塔，你的代码没有任何错误，但问题是，当你点击按钮时，你的javascript正在正常运行，它也将li添加到div列表中，但同样的，你的页面被提交是因为两个主要原因

1) your button is not having id 

2) your page containing form tag.

I suggest you that if the form tag is not necessary then remove it, or add the id to button

我建议您，如果不需要表单标记，那么删除它，或者向按钮添加id

#1