使用 .after() 方法问题将 li 元素添加到 ul 列表

Question

我正在尝试将 li 元素添加到 ul 列表。但是在我打开页面源代码后，我看不到我的 DOM 已更新。这是下面的代码。我也无法删除元素....当我点击删除按钮时没有任何反应。

   var msg       = $('#danger').hide();
   var inputText = $('#todo');
   //var list      = $('#list');
   var globalObj;

   //general function that will call other functions
   function addListElement(event)
   {
       event.preventDefault();
       var input = inputText.val();
       if( input == '')
       {
           msg.show();
       }
       else
       {
           msg.hide();
           addCookie(input);
           readCookie();
       }

   }
    //function for adding value to cookie
    function addCookie(inputValue)
    {
        globalObj = {text: ''+ inputValue+''};
        $.cookie('vesko', '' +  globalObj.text + '');

    }
    // function for reading cookie
    function readCookie()
    {
        var listCookie = $.cookie('vesko');

        $('#list').after('<li><input type="checkbox">' + listCookie + '<button class="delete">Delete</button></li>');
    }



   $(function (){
       $('#add').on('click', addListElement);
       $('.delete').on('click', function(){
         $('.delete').parent().remove();
       });
   });



<div class="container-fluid">

  <div class="row">
   <div class="col-md-8">
    <h1> <strong> Todo app</strong></h1>
    <div class="alert alert-danger" id="danger" role="alert"><strong>Please type something in the field!</strong></div>
     <form action="" method="" class="form-inline">
      <div class="form-group">
       <div class="input-group">
        <div class="input-group-addon"><span class="glyphicon glyphicon-floppy-save"></span></div>
         <input type="text" class="form-control" name="todo" id="todo" placeholder="Type Something">
       </div>
      </div>
      <button type="submit" id="add"  class="btn btn-primary">Add ToDo Task</button>

     </form>
   </div>
  </div>
  <br><br><br>
  <!-- row for ul list elements -->
  <div class="row">
   <div class="col-md-5">
    <ul id="list">
    </ul>
   </div>
  </div>

</div>

Answer 1

你能把这个$('#list').after改成$('#list').append吗？您需要分享更多 html 以获得更好的帮助。

after 会将所有内容放在您的列表之后，而不是在您的列表中。您应该使用 append，这会将您的新项目添加到名为 #list 的列表的末尾。

您还需要重新考虑这一部分：

$(function (){
   $('#add').click(function(event){
        addListElement(event);
   });
   $(document).on('click', '.delete', function(){
       $(this).parent().remove();
   });
});

Answer 2

如果#list 是 ul，那么您要使用 "append" 而不是 "after"。 after 会添加一个孤立的 li，同理，在 ul 之后，while append 会把它放在 in 的 ul.

里面

假设您可能也有多个删除按钮，您还应该考虑更改：

$('.delete').parent().remove();

至

$(this).parent().remove();

使用 .after() 方法问题将 li 元素添加到 ul 列表

add li elements to ul list with .after() method issue

javascript

cookies

jquery