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

これは、複数のクリック ハンドラーを 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/

于 2013-05-09T10:20:51.347 に答える