0

在登录框中，我添加了一个名为“重置密码”的按钮。单击该按钮时，我会在同一表单中显示更多字段，并且按钮显示“取消”。但是，当单击“取消”并且添加的字段消失时，原始按钮将停止连续单击。 

<div class="show_hide_login_box margin10-right">
    <dl>    <dt>Username:</dt>

        <dd>
            <input type="text" class="input" value="admin@xento.com" name="company_user[username]" readonly="true"><span style="display:none;">@xento</span>
        </dd>
    </dl>
    <dl id="passward_link" style="display: block;"> <dt>Password:</dt>

        <dd>
            <input type="text" class="input" value="admin@xento.com" name="company_user[username]" readonly="true"><span style="display:none;">@xento</span>
        </dd>
    </dl>
    <div id="password_fields" style="display: none;">
        <dl>    <dt>Current Password:</dt>

            <dd>
                <input type="password" class="input">
            </dd>
        </dl>
        <dl>    <dt>New Password:</dt>

            <dd>
                <input type="password" class="input">
            </dd>
        </dl>
        <dl>    <dt>Verify New Password:</dt>

            <dd>
                <input type="password" class="input">
            </dd>
        </dl>
        <dl>    <dt></dt>

            <dd><small>Passwords must be at least 6 characters long</small>
            </dd>
        </dl>
    </div>
    <hr>
    <dl>    <dt>&nbsp;</dt>

        <dd>
            <button class="button">Login</button>
            <button class="button reset_pass">Reset Password</button>
        </dd>
    </dl>
</div>

和js代码

$(document).ready(function() {

/* SHOW-HIDE LOGIN BOX */

$('.reset_pass').on('click',function(){
    $('#password_fields').show();
    $(this).text('Cansel');
    $(this).addClass('cansel_box');
    $('.cansel_box').on('click',function() {
        $('#password_fields').hide();
        $(this).text('Reset Password');
        $(this).removeClass('cansel_box');
    });
 });
 });

在此处运行示例：http: //jsfiddle.net/eKGbL/1/

我必须在这里做一些根本错误的事情。

4

1 回答 1

2

那是因为您将多个点击处理程序附加到一个元素，实际上您应该委托事件，但我建议toggle方法：

$('.reset_pass').on('click', function () {
    $('#password_fields').toggle();
    $(this).text(function(_, oldText){
        return oldText === 'Reset Password' ? 'Cancel' : 'Reset Password';
    });
});

http://jsfiddle.net/6TwYH/

于 2013-05-09T10:20:51.347 回答