jQuery-使用empty（）后，append（）无法再次运行

Question

jQuery-使用empty（）后，append（）无法再次运行

我想在对话框（灯箱样式）中显示一个注册/登录表单，但是在单击触发器超链接时，两者都只显示一次。单击一次后，页面仍将模糊，但对话框将不显示任何内容。

省略empty（）函数时，此代码可以很好地工作，但是登录和注册表单都显示在1个对话框中。当用户单击登录链接时，我只想显示登录表单，而当用户单击注册超链接时，我只想显示登录表单。

请参见下面的代码（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>

Run Code Online (Sandbox Code Playgroud)

或查看此提琴以获取问题的快速示例：http : //jsfiddle.net/zwprf0yw/

编辑 clone（）函数效果很好，但是这会引起另一个问题：单击该对话框时，对话框将关闭。我认为这阻止了此代码块的工作。有什么建议么？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Poi*_*nty 5

您必须.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();
            });

Run Code Online (Sandbox Code Playgroud)

当您找到一个现有元素，然后.append()在其他地方找到它时，会将其从其原始位置移除。

编辑 -为了使它真正起作用，应通过委托完成事件处理：

            //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;
            });

Run Code Online (Sandbox Code Playgroud)

这样，将正确处理克隆对话框的事件。

归档时间：	11 年，1 月前
查看次数：	2817 次
最近记录：	11 年，1 月前