4

複雑なフォームのセットをロードするページがあります。この一連のフォームには、パスワードフィールドがあります。これらのパスワードフィールドには表示/非表示の切り替えスイッチがあり、いずれかをクリックすると、すべてのパスワードフィールドがDOM内で同等のものに置き換えられ、表示/非表示の効果を促進するためにタイプが「テキスト」と「パスワード」の間で切り替えられます。 。明確にするために、元の入力は、IDを含む同じ属性を持つが、タイプ属性が異なるまったく新しい入力に置き換えられます。

問題は、トグルが発生すると、以前にjQueryセレクターで作成したグローバルハンドル（$（'＃password_field_id'）など）がパスワードフィールドにマップされなくなることです。

現在のDOMから元のCSSセレクターを再選択するセレクターで実行できるjQuery関数はありますか？

入力を置き換える関数は次のとおりです。

function TogglePasswordHide()
{
    var show = false;
    if ($('#basic_pass_24').attr('type') == 'password')
    {
        show = true;
    }

    $('input.password_input').each(function()
    {
        var sDisabled = '';
        if ($(this).is(':disabled'))
        {
            sDisabled = 'disabled="disabled"';
        }

        if ( show ) // show the password
        {
            $(this).replaceWith('<input type="text" '+sDisabled+' class="password_input" id="'+$(this).attr('id')+'" value="'+$(this).val()+'">');
            show_password.text('hide');
        }
        else // hide the password
        {
            $(this).replaceWith('<input type="password" '+sDisabled+' class="password_input" id="'+$(this).attr('id')+'" value="'+$(this).val()+'">');
            show_password.text('show');
        }
    });
}

...置換が行われた後に.each中にjqueryオブジェクトを「再ロード」するための呼び出しがあります。これにより、同じ相対入力へのグローバルハンドルが、新しいjQueryオブジェクトを再宣言するのではなく、単に更新されます。各要素に同じセレクターを使用して、元のハンドルを上書きしますか？

4

1 に答える 1

3

イベント委任を使用し、親フォームでイベントをリッスンします。

$("form").on("click", ".password_input", function(event) {
    /* What to do when password input is clicked */
});

このイベントはフォーム要素にバインドされているため、イベントが失われることを心配することなく、必要に応じて入力を追加および削除できます。

パスワード入力の1つをクリックするか、他のアクションを実行すると、このイベントがフォームに表示され、そこで評価されます。.targetセレクター（この例では）と一致する場合.password_input、コールバック関数が呼び出され、発生したイベントに対応できます。

于 2012-06-05T19:46:59.987 に答える