jquery - 输入点击不起作用

Question

当我单击一个按钮时，我的页面上有一个表单，该表单隐藏了另一个表单。这里我调用了 jQuery 的 show() 和 hide()按钮并更改按钮的 value 和 id 属性。然后使用按钮新的 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

您需要使用事件委托(delegate)因为当您绑定(bind)点击事件时#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");
});