JQuery Replacewith DIV 不加载答案

【问题标题】：JQuery Replacewith DIV does not loadJQuery Replacewith DIV 不加载
【发布时间】：2016-09-12 01:17:41
【问题描述】：

所以我有登录页面，如果他们单击按钮进行注册，我会尝试将登录表单替换为注册表单。

目前我有：

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("w").replaceWith(function(n){
            return "DIV HERE BUT DIVS DO NOT WORK";
        });
    });
});
</script>
</head>
<body>
<div class="col-lg-6 col-sm-6 col-xs-12 social-login">
                        <a href="#" class="google_button login_btn">
                            <i aria-hidden="true" class="fa fa-google-plus-square"></i><span>Continue with Google</span>
                        </a>
                        <a href="#" class="facebook_button login_btn">
                            <i aria-hidden="true" class="fa fa-facebook-square"></i><span>Continue with Facebook</span>
                        </a>
                        <a href="#" class="twitter_button login_btn">
                            <i aria-hidden="true" class="fa fa-twitter-square"></i><span>Continue with Twitter</span>
                        </a>
                        <a href="#" class="linkedin_button login_btn">
                            <i aria-hidden="true" class="fa fa-linkedin-square"></i><span>Continue with Linkedin</span>
                        </a>
                        <a href="/signup" class="email_button login_btn">
                            <i aria-hidden="true" class="fa fa-linkedin-square"></i><span>Continue with Email</span>
                    </a>
                    <button>Continue With Email</button> <span class="light_grey">By signing up you indicate that you have read and agree to the <a target="_blank" href="#">Terms of Service</a> and <a target="_blank" href="#">Privacy Policy</a>.</span>
                </div>

                    <form action="" class="signin_form" method="post">
                        <w><div class="title">Login</div></p></w>
                        <div class="form_inputs">
                            <div class="form_column">
                                <input type="text" name="username" id="username" placeholder="Email" value="" class="username">
                            </div>
                            <div class="form_column">
                                <input type="password" name="password" id="password" placeholder="Password" value="" class="password">
                            </div>
                            <div class="form_column">
                                <span><div class="remember_checkbox"><input type="checkbox" value="" name="remember_checkbox" checked="checked" class="remember_checkbox">Remember Me</div></span><input type="submit" value="Sign In" name="send" class="btn btn-primary pull-right" />
                                <span><a href="#" class="forgot_password">Forgot Password?</a></span>
                            </div>
                        </div>
                    </form>
</body>

我想将表单类 signin_form 替换为：

                        <form action="" class="signup_form" method="post">
                        <div class="title">Sign up!</div>
                        <div class="form_inputs">
                            <div class="form_column">
                                <input type="text" name="email" id="email" value="<?php echo $dd; ?>" class="email" placeholder="Email">

                            </div>

                            <div class="form_column">
                                <input type="text" name="username" id="username" placeholder="First Name" value="<?php echo $_POST['username']; ?>">
                            </div>

                            <div class="form_column">
                                <input type="password" name="password" id="password" placeholder="Password" value="" class="password">

                            <div class="form_column">
                                <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password" value="" class="confirm_password">
                            </div>

                            <div class="form_column">
                                <span><a href="/login" class="forgot_password">Already Have an Account?</a></span><input type="submit" value="Sign Up" name="send" class="btn btn-primary pull-right" />
                            </div>
                        </div>
                    </form>

使用我当前使用的 replaceWith，如果它不包含 div，我可以替换一行，如果我放入一个 div，它就不会再加载了。

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

我认为 replaceWith 不是实现您想要的功能的正确方法，这不是因为您不能，而是因为您需要动态创建一个新表单并且必须将所有事件挂钩到元素新形式。相反，您应该执行以下操作

创建登录和注册表单
在 CSS 中隐藏注册表单并仅显示登录表单
单击按钮隐藏登录表单并显示注册表单。

这将是实现您所追求的功能的最简单和最安全的方法。

【讨论】：

是否有任何文件说明这是如何在某处完成的？
你的意思是我的回答？让我赶紧给你写一个sn-p。
任何文件！！！这并不意味着你的答案......官方文件或其他文件......
恐怕没有任何文档可以说 replaceWith 不能用于您的特定需求。但基本上，您动态创建的任何新 DOM 元素，即 replaceWith 默认情况下不会有任何与之关联的事件，您需要自己绑定事件，它是一个 FORM，它更容易出错。如果这有意义的话。
大卫我不知道你想说什么。无论如何，Senthil 谢谢你的建议，我已经使用 .show 和 .hide 完成了这项工作，正如我在 jquery 文档中找到的那样，但它仍然在与我作斗争，无论如何你可以看看可能会指出我正确的方向。 jsfiddle.net/upcbq0xe