附加li元素

Question

当我尝试使用jQuery将li元素附加到列表时，我遇到了问题。当我在HTML中创建静态li元素时，mouseenter和mouseleave功能正常工作。但是当我想使用append函数添加li元素时，mouseenter不起作用。你能解释我，我犯错了吗？

$(document).ready(function() {
  var input = $('.task-input');
  var span = '<span class="remove"><i class="fa fa-trash" aria-hidden="true"></i></span>'

  $('.add-button').click(function() {
    if(input.val() == '') {
      var margin = 10;
      for(var i = 0; i < 10 ; i++) {
        $(this).animate( {
            'margin-left': '+=' + (margin = -margin) + 'px'
         }, 50);
      }



    }
    else {
      $('ul').append('<li><p class="task">'+input.val()+'</p>'+ span +'</li>');
      input.val('');
    }

  })

  $('.list').find('li').mouseenter(function() {
    $(this).css({
      'background-color':'yellow'
    })
    $('.remove').css({
      'display':'block'
    })

    $('.remove').click(function() {
      $(this).parent().remove();
    })
  })

  $('.list').find('li').mouseleave(function() {
    $(this).css({
      'background-color':'lightgray'
    })

    $('.remove').css({
      'display':'none'
    })
  })



})

https://jsfiddle.net/nvmgtwq0/2/