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

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

演示

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