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>');
    });
});

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

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
});

Answer 4

嘿Nikita你的代码没有任何错误，但问题是当你点击按钮时你的javascript运行正常并且它还将li添加到div列表但是同样地你的页面因为两个主要事情而被提交

1) your button is not having id 

2) your page containing form tag.

我建议您如果不需要表单标签，请将其删除，或将ID添加到按钮

使用jquery在ul中添加li元素

4 个答案: