jQuery绑定问题和绑定后更新

Question

我有以下测试代码：

$('.add').on("click", function(){
console.log('count items: '+$('.item').length);
  var newItem = '<div class"item">New Item</div>';
  $('.items').append(newItem);
})

$('.items').on('click', '.item', function(){
  $(this).fadeOut();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add">
Add
</button>
<div class="items">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

问题1：为什么计数总是3，如何获得更新的计数 问题2：为什么新项目没有像前3个那样在点击时消失？

谢谢

Answer 1

计数始终为3，因为类“ item”中有3项内容，$('.item')会找到全部三项，并且在添加新项目时会出现错字<div class"item">。