Geek Answers Handbook

JQuery - append () doesn't work a second time after using empty ()

I want to show the registration / login form in the dialog box (lightbox style), but both of them are displayed only once when clicking on the trigger hyperlink. After a single click, the page will still blur, but the dialog will not display anything.

This code works fine when omming the empty () function, but then the login and registration form is displayed in 1 dialog box. When a user clicks on the login link, I want to show only the login form, and when users click on the register hyperlink, I want to show only the registration form.

See the code below (HTML, CSS, jQuery).

    <html>
    <head>
    <style>

        #lightbox {
            position:fixed;
            top:0; 
            left:0; 
            width:100%; 
            height:100%; 
            background:rgba(0,0,0,0.5);
            display:none;
        }

        #invisible_register, #invisible_login {
            display:none;
            position:absolute;
        }

    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        jQuery(document).ready(function($) {

            $('.trigger_register').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_register'));
                $('#lightbox').show();
                $('#invisible_register').show();
            });

            $('.trigger_login').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_login'));
                $('#lightbox').show();
                $('#invisible_login').show();
            });

            //Click anywhere on the page to get rid of lightbox window
            $("#lightbox").click(function() {
                $('#lightbox').hide();
            });

            //Except for the dialog box
            $(".dialog").click(function(e) {
                e.stopPropagation();
                return false;
            });   
        });
    </script>
</head>
<body>

    <div id="lightbox"></div>

    <div id="invisible_register">
        <div class="container">
            <div class="dialog">
                <div class="box">
                    <div class="box_left">
                        <h1>Register</h1>
                    </div>
                    <div class="box_right">
                        <div class="error_text"></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>     
    </div>

    <div id="invisible_login">
        <div class="container">
            <div class="dialog">
                <div class="box">
                    <div class="box_left">
                        <h1>Login</h1>
                    </div>
                    <div class="box_right">
                        <div class="error_text"></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>     
    </div> 

    <a href="" class="button trigger_register">Register</a>
    <a href="" class="button trigger_login">Login</a>

</body>
</html>

Or look at this fiddle for a quick example of the problem: http://jsfiddle.net/zwprf0yw/

clone() , : . , . ?

        $(".dialog").click(function(e) {
            e.stopPropagation();
            return false;
        });
+4
3

.clone() . , .empty() .

.

            $('.trigger_register').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_register').clone());
                $('#lightbox').show();
                $('#invisible_register').show();
            });

            $('.trigger_login').click(function(e) {
                e.preventDefault();
                $('#lightbox').empty().append($('#invisible_login').clone());
                $('#lightbox').show();
                $('#invisible_login').show();
            });

, .append() , .

edit — , :

            //Click anywhere on the page to get rid of lightbox window
            $(document).on("click", "#lightbox", function() {
                $('#lightbox').hide();
            });

            //Except for the dialog box
            $(document).on("click", ".dialog", function(e) {
                e.stopPropagation();
                return false;
            });

, .

+3

.clone() . A B, , , HTML .

$('#lightbox').empty().append($('#invisible_login').clone());
(...)
$('#lightbox').empty().append($('#invisible_register').clone());
+1

Just add .html()to the append and don’t show invisible_logineven invisible_registerafter clicking the trigger.

...
                $('.trigger_register').click(function(e) {
                    e.preventDefault();
                    $('#lightbox').empty().append($('#invisible_register').html());
                    $('#lightbox').show();
                });

                $('.trigger_login').click(function(e) {
                    e.preventDefault();
                    $('#lightbox').empty().append($('#invisible_login').html());
                    $('#lightbox').show();
                });
...

Live demo - http://jsfiddle.net/zwprf0yw/1/

To prevent the lightbox from closing when clicked .dialog, use this event handler:

            //Except for the dialog box
            $("#lightbox").on('click', '.dialog', function(e) {
                e.stopPropagation();
                return false;
            });

Live demo - http://jsfiddle.net/zwprf0yw/2/

+1
source

More articles:


All Articles