Question

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

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

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

Answer 1

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

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

http://jsfiddle.net/6TwYH/

Jquery - 在另一次单击中添加的单击事件可防止原始单击

1 个答案: