jquery的消失显示效果问题

现默认有6个div方块，点击可使其消失
另有一个增加div按钮，课添加div

问题

新添加的div无法点击消失

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div{
                width: 50px;
                height: 50px;
                background-color: #7FFFD4;
                margin: 0.125rem;
                float: left;
            }
        </style>        
        </div>
    </head>
    <body>
        <div></div>
        <button type="button" id="adddiv">加一个div</button>

        <script type="text/javascript">
            $(document).ready(function(){
                //利用循环加五个方块
              for(var i=0;i<5;i++){
                $("<div>").appendTo(document.body);
              } 
              //设置隐藏效果
              $("#adddiv").click(function(){
                $("<div>").appendTo(document.body);
              }); 
                //点击消失效果
              $('div').click(function(){
                $(this).hide(600);
              });
            });
        </script>
    </body>
</html>

请问问题出现在了na

因为$("div")获取的只是当前页面上现有的div，也就只给当前页面上现有的div绑定了事件。之后再创建的div没有绑定事件。

要改成委托式的绑定事件。这样之后再创建的div也能触发事件

                //点击消失效果
              $(document).on("click", "div", function(event){
                $(this).hide(600);
              });