无法加载JQuery Replacewith DIV

Question

So I have login page and I am trying to replace the login form with the signup form if they click the button to sign up. 因此，我有登录页面，如果他们单击按钮进行注册，我将尝试用注册表单替换登录表单。

Currently I have: 目前我有：

<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>

I would like to replace the form class signin_form with: 我想将表单类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>

Using the replaceWith that I am currently using I can replace a single line if it doesn't include a div, if I put in a div it doesn't load anymore. 使用我目前正在使用的replaceWith，如果它不包含div，则可以替换一行；如果放入div，则不再加载。

Answer 1

I think replaceWith is not the right way to achieve the functionality that you want, this is not because you cannot, it is because you will then need to dynamically create a new form and have to hook all the events to the elements in the new form. 我认为replaceWith不是实现所需功能的正确方法，这不是因为您不能，而是因为您随后需要动态创建新表单，并且必须将所有事件挂接到新表单中的元素上。 Instead you should do the following 相反，您应该执行以下操作

Create both the Signin and Signup form 创建登录和注册表单
Hide the Signup form in CSS and show only the Signin form 在CSS中隐藏Signup表单，仅显示Signin表单
On click of the button Hide the Signin form and show the signup form. 单击按钮后，隐藏登录表单并显示注册表单。

This will be the easiest and safest way to achieve the sort of functionality you are after. 这将是实现您所追求的那种功能的最简单，最安全的方法。

无法加载JQuery Replacewith DIV

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-09-12 01:36:19

无法加载JQuery Replacewith DIV

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-09-12 01:36:19

解决方案1
1 已采纳 2016-09-12 01:36:19