Question

当我点击表单隐藏的按钮并显示另一个表单时，我的页面上有一个表单。这里我调用jQuery的show()和hide()按钮并更改按钮的value和id属性。然后使用按钮new id属性，我在其上使用click()函数。但遗憾的是它不起作用。

这是fiddle。

HTML：

<form id="sign_in">
    <table style="margin: 0 auto;">
        <tr>
            <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign In</span>

            </td>
            <tr>
                <td>
                    <input class="input" type="email" placeholder="Username" name="username" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="input" type="password" placeholder="Password" name="password" />
                    <br />
                </td>
            </tr>
            <tr align="right">
                <td>
                    <input class="btn" type="submit" value="Sign In">
                </td>
            </tr>
    </table>
</form>
<form id="sign_up">
    <table style="margin: 0 auto;">
        <tr>
            <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign Up</span>

            </td>
            <tr>
                <td>
                    <input class="input" type="email" placeholder="Username" name="username" />
                </td>
            </tr>
            <tr>
                <td>
                    <input class="input" type="password" placeholder="Password" name="password" />
                    <br />
                </td>
            </tr>
            <tr align="right">
                <td>
                    <input class="btn" type="submit" value="Sign In">
                </td>
            </tr>
    </table>
</form>
<br/>
<input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input>

JS：

$(document).ready(function () {
    $("#sign_up_btn").click(function () {
        $("#sign_in").hide("slow");
        $("#sign_up").show("slow");
        $(this).attr("value", "Already have an account?");
        $(this).attr("id", "sign_in_btn");
    });
    $("#sign_in_btn").click(function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
    });
});

Answer 1

您需要使用事件委派，因为绑定点击事件时#sign_in_btn不存在

$(document.body).on('click',"#sign_in_btn",function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
});

Answer 2

使用toggle()

$(document).ready(function () {
    $("#sign_up_btn").click(function () {
        $("#sign_in, #sign_up").toggle("slow");
        $(this).val(function(_, val) {
            return val == 'Create An Account' ? 'Already have an account?' : 'Create An Account';
        });
    });
});

FIDDLE

Answer 3

$(document).ready(function () {
    $(document).on('click', "#sign_up_btn",function () {
        $("#sign_in").hide("slow");
        $("#sign_up").show("slow");
        $(this).attr("value", "Already have an account?");
        $(this).attr("id", "sign_in_btn");
    });
    $(document).on('click', "#sign_in_btn", function (e) {
        e.stopPropagation();
        $("#sign_up").hide("slow");
        $("#sign_in").show("slow");
        $(this).attr("value", "Create An Account");
        $(this).attr("id", "sign_up_btn");
    });
});

输入点击不起作用

3 个答案: