ASP.net 两个DIV重叠放在一起后 两个DIV里面的按钮下的代码不起作用

图片说明
上面的图片代码中 left是个大的DIV left1 left2 是在left中的两个重叠在一起的DIV.
图片说明
图片说明
这两张图片是 我点击注册后 left1出现 点击登陆后 left2出现。
问题出在 在left1出来后我点击left1 里面的注册按钮 其中的代码不起作用
代码如下图：多余的代码就不写了 那个提示不能为空的代码就不起作用！

 <script type="text/javascript">
$(function(){
     $("#left1 div").on("click",function(){
       $("#left1").css("display","none");
        $("#left2").css("display","block");
     });
     $("#left2 div").on("click",function(){
        $("#left2").css("display","none");
        $("#left1").css("display","block");
     });
})
</script>
</head>
<body>
    <div id="left" >
        <div id="left1">
         <div>注册</div>
        </div>
        <div id="left2">
        <div>登陆</div>
        </div>
    </div>
</body>
</html>