click event not working in jquery

click event not working in jquery

Hi,

in my application there is a div with id pr like this

<div>
   <div id="pr">test</div>
    </div>

on the click event of pr ,a new div will open like this

  1. $('#pr').click(function (e) {
                e.preventDefault();
                $('body').append('<div id="divprofit" style=" position:absolute; background-color:grey; width:300px;height:150px;border:1px solid blue; top: 200px; left: 250px;"><table><tr><td>Enter Admin password</td><td><input type="text" runat='server' id='txtpw'/></td></tr><tr><td><input type='button' id='btncheck' runat='server' value='Ok'/></td></tr></table></div>')
                 
            });



inside div profit there is a button with id btncheck

on the clickevent  div profit will hide following is the code

  1. $('body').on('click', '#btncheck', function () {
           
              $('#divprofit').hide();
             
             });



my problem is on the click event of pr,divprofit will open.

when i pressed the button inside divfrofit, it will hide.

again i press the pr div ,divprofit will open.but button inside divprofit will not work

following is complete code

  1. <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script  type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script type="text/javascript" language="javascript">
     $(document).ready(function(){
     $('#pr').click(function (e) {
                e.preventDefault();
                $('body').append('<div id="divprofit" style=" position:absolute; background-color:grey; width:300px;height:150px;border:1px solid blue; top: 200px; left: 250px;"><table><tr><td>Enter Admin password</td><td><input type="text" runat='server' id='txtpw'/></td></tr><tr><td><input type='button' id='btncheck' runat='server' value='Ok'/></td></tr></table></div>')
                 
            });
             $('body').on('click', '#btncheck', function () {
           
              $('#divprofit').hide();
             
             });

    });
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   <div id="pr">test</div>
    </div>
    </form>
</body>
</html>

how to solve this

Regards

Baiju