How to solve the problem that cannot be displayed after jquery generates DOM append? (this question contains 2 questions)

recently I have been practicing making a pop-up box,

= [part 1] =
put the code first: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <!-- 3meta**** -->
        <title></title>
        <!-- Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">

            .pop_wrap {
                z-index: 1400;
                width: 1360px;
                position: absolute;
                top: 150px;
                display: none;
            }
            .pop_con {
                width: 500px;
                height: 200px;
                margin: 0 auto 0;
                background: -sharpfafafa
            }
            .pop_p {
                font-size: 20px;
                margin-top: 50px;
                text-align: center;
            }
            .pop_row {
                margin-top: 50px;
            }
            .pop_btn {
                text-align: center;
                height: 30px;
            }
            .w_200 {
                width: 200px;
            }
            .pop_mask {
                z-index:1300;
                position: absolute;
                top:0px;
                left:0px;
                background:-sharp000000;
                opacity:0.5;
                width:1920px;
                height:2052px;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="pop_wrap" id="confirm_pop">
            <div class="container pop_con">
                <p class="pop_p">?

                <div class="row pop_row">
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_x" class="btn btn-lg btn-default w_200"></button>
                    </div>
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_o" class="btn btn-lg btn-primary w_200"></button>
                    </div>
                </div>
            </div>
        </div>
        <input id="enter" type="button" value="">
        <div class="pop_mask" id="pop_mask"></div>

        <!-- jQuery (Bootstrap  JavaScript  jQuery) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!--  Bootstrap  JavaScript  -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            $(function(){

                $("-sharpenter").on("click", function(){
                    $("-sharppop_mask").show();
                    $("-sharpconfirm_pop").show();
                    $("-sharpbtn_x").on("click", function(){
                        alert("NO");
                        $("-sharpconfirm_pop").hide();
                        $("-sharppop_mask").hide();
                    });
                    $("-sharpbtn_o").on("click", function(){
                        alert("yes");
                        $("-sharpconfirm_pop").hide();
                        $("-sharppop_mask").hide();
                    }); 
                });
            });

        </script>
    </body>
</html>

found the first problem:
[question 1] I used the method of "bounce frame div + mask div" to make "modal bounce frame". The method is to use JQUERY to make the bounce frame / mask show and hide together. < < for debugging convenience, I added alert () to every pop-up button (NO and YES)

there is a problem here: after the first pop-up, I press the button, alert pops out once, pop-up box and mask all hide; the second time I press the button and click the button in the pop-up box, alert pops up twice, the pop-up box and Maskmurade show! The third time, alert jumps three times.

. "the reason for asking

= [part 2] =
[question 2]
then, I understand that I need to use jquery to generate DOM and then append to DOM, and then, after each click on yes OR no, I want to remove this pop-up box part (.pop_wrap "s div and its sub-div)!

so, continue to play the code: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <!-- 3meta**** -->
        <title></title>
        <!-- Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">

            .pop_wrap {
                z-index: 1400;
                width: 1360px;
                position: absolute;
                top: 150px;
                display: none;
            }
            .pop_con {
                width: 500px;
                height: 200px;
                margin: 0 auto 0;
                background: -sharpfafafa
            }
            .pop_p {
                font-size: 20px;
                margin-top: 50px;
                text-align: center;
            }
            .pop_row {
                margin-top: 50px;
            }
            .pop_btn {
                text-align: center;
                height: 30px;
            }
            .w_200 {
                width: 200px;
            }
            .pop_mask {
                z-index:1300;
                position: absolute;
                top:0px;
                left:0px;
                background:-sharp000000;
                opacity:0.5;
                width:1920px;
                height:2052px;
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- <div class="pop_wrap" id="confirm_pop">
            <div class="container pop_con">
                <p class="pop_p">?

                <div class="row pop_row">
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_x" class="btn btn-lg btn-default w_200"></button>
                    </div>
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_o" class="btn btn-lg btn-primary w_200"></button>
                    </div>
                </div>
            </div>
        </div> -->
        <input id="enter" type="button" value="">
        <div class="pop_mask" id="pop_mask"></div>

        <!-- jQuery (Bootstrap  JavaScript  jQuery) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!--  Bootstrap  JavaScript  -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            $(function(){

                $("-sharpenter").on("click", function(){
                    $("-sharppop_mask").show();
                    var pop = $("<div class="pop_wrap" id="confirm_pop"><div class="container pop_con"><p class="pop_p">?
<div class="row pop_row"><div class="col-xs-6 pop_btn"><button type="button" id="btn_x" class="btn btn-lg btn-default w_200"></button></div><div class="col-xs-6 pop_btn"><button type="button" id="btn_o" class="btn btn-lg btn-primary w_200"></button></div></div></div></div>");
                    $("body").prepend(pop);
                    // $("-sharpconfirm_pop").show();
                    $("-sharpbtn_x").on("click", function(){
                        $("-sharpconfirm_pop").hide();
                        $("-sharppop_mask").remove();
                    });
                    $("-sharpbtn_o").on("click", function(){
                        $("-sharpconfirm_pop").hide();
                        $("-sharppop_mask").remove();

                    }); 
                });
            });

        </script>
    </body>
</html>

all right, this pop-up box is not even displayed! F12 can see that this DOM has been added to the DOM, but the mouse hover in the element code, there are no highlighted color blocks on the screen, that is, the DOM of this pop-up box exists in theory, but does not exist in practice! .

. "the reason for asking

Dom html javascript jquery
Mar.01,2021

the first question, let's call it a nested registration event, that is, when you register for event handling, don't write it nested. Your problem with this is that you write two event handlers that require hide into a click. This is equivalent to tying the corresponding DOM to an event handler every time you click, so there will be such a problem for you, because you have tied a lot of them over and over again. Here, you should not understand this on as what to do when an event happens. this on is more like an agreement in advance. If an event happens, I will run a function, but of course you will run several times if you re-register.
the second question, the mobile phone answers the question, so I didn't run your code. I think you can change it to the .append () method and try again. The higher the level in the HTML code, the lower the level.

because you repeatedly bind events to the button, the more clicks, the more pops.
for dom elements that are not dynamically generated, events can be bound outside the click event of enter. For dynamically generated elements, delegate

can be used. 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <!-- 3meta**** -->
        <title></title>
        <!-- Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">

            .pop_wrap {
                z-index: 1400;
                width: 1360px;
                position: absolute;
                top: 150px;
                display: none;
            }
            .pop_con {
                width: 500px;
                height: 200px;
                margin: 0 auto 0;
                background: -sharpfafafa
            }
            .pop_p {
                font-size: 20px;
                margin-top: 50px;
                text-align: center;
            }
            .pop_row {
                margin-top: 50px;
            }
            .pop_btn {
                text-align: center;
                height: 30px;
            }
            .w_200 {
                width: 200px;
            }
            .pop_mask {
                z-index:1300;
                position: absolute;
                top:0px;
                left:0px;
                background:-sharp000000;
                opacity:0.5;
                width:1920px;
                height:2052px;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="pop_wrap" id="confirm_pop">
            <div class="container pop_con">
                <p class="pop_p">?

                <div class="row pop_row">
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_x" class="btn btn-lg btn-default w_200"></button>
                    </div>
                    <div class="col-xs-6 pop_btn">
                        <button type="button" id="btn_o" class="btn btn-lg btn-primary w_200"></button>
                    </div>
                </div>
            </div>
        </div>
        <input id="enter" type="button" value="">
        <div class="pop_mask" id="pop_mask"></div>

        <!-- jQuery (Bootstrap  JavaScript  jQuery) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!--  Bootstrap  JavaScript  -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            $(function(){
                $('-sharpenter').on("click", function(){
                    $("-sharppop_mask").show();
                    $("-sharpconfirm_pop").show();
                });
                $("body").on("click", "-sharpbtn_x" ,function(){
                        alert("NO");
                        $("-sharpconfirm_pop").hide();
                        $("-sharppop_mask").hide();
                    });
                $("body").on("click", "-sharpbtn_o", function(){
                    alert("yes");
                    $("-sharpconfirm_pop").hide();
                    $("-sharppop_mask").hide();
                });
            });

        </script>
    </body>
</html>

Previous: How to output data in reverse order to the second layer and below in vue multiple loops

Next: Windows 10 Docker mount directory cannot modify directory permissions in docker

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c270b4-3381f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c270b4-3381f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?