locked
button's click function not working properly using jquery RRS feed

  • Question

  • User1839056048 posted

    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

     

    $('#pr').click(function (e) {
                    e.preventDefault();
                    $('body').append('<div id="divprofit" style=" ; 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

     

    $('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

    <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=" ; 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

    Thursday, December 3, 2015 3:49 PM

Answers

  • User61956409 posted

    Hi Baiju,

    You could remove “divprofit” div instead of hiding it, the following sample works fine on my side.

    <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>
            $(document).ready(function(){
                $('#pr').click(function (e) {
                    e.preventDefault();
                    $('body').append('<div id="divprofit" style=" ; 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').remove();       
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="pr">test</div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 4, 2015 8:38 AM

All replies

  • User475983607 posted

    I surprised it works at all due to several syntax errors.  Anyway, give this a try...

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryDemo6.aspx.cs" Inherits="WebAppDemo.JQueryDemo6" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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 () {
                $('#divprofit').hide();
    
                $('#pr').click(function (e) {
                    $('#divprofit').show();
                });
    
                $('#<%=btncheck.ClientID %>').click(function () {
                    $('#divprofit').hide();
                });
    
            });
        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div>
                <div id="pr">
                    test</div>
            </div>
            <div id="divprofit" style="; 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>
        </div>
        </form>
    </body>
    </html>

    Thursday, December 3, 2015 4:09 PM
  • User1839056048 posted

    Thanks for your reply.

    I have tried your example.

    the problem is if page contains some controls,

    divprofit will come under the controls.then  we can't see the complete divprofit.

    how to solve this

    Thursday, December 3, 2015 4:59 PM
  • User475983607 posted

    Use the z-index property to place the div on top of the other HTML elements

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

    Or use JQuery UI's dialog component.

    https://jqueryui.com/dialog/

    Thursday, December 3, 2015 6:05 PM
  • User61956409 posted

    Hi Baiju,

    You could remove “divprofit” div instead of hiding it, the following sample works fine on my side.

    <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>
            $(document).ready(function(){
                $('#pr').click(function (e) {
                    e.preventDefault();
                    $('body').append('<div id="divprofit" style=" ; 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').remove();       
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="pr">test</div>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 4, 2015 8:38 AM