3

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

这是小提琴。

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");
    });
});
4

3 回答 3

4

您需要使用事件委托，因为#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");
});
于 2013-06-29T20:17:34.197 回答
1

利用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';
        });
    });
});

小提琴

于 2013-06-29T20:19:44.073 回答
0 
$(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");
    });
});
于 2013-06-29T20:45:05.833 回答