4

我有一个加载一组复杂表单的页面。在这组表单中，有密码字段。这些密码字段具有显示/隐藏切换开关，当其中任何一个被单击时，所有密码字段都将替换为 DOM 中它们自身的等价物，其类型在“文本”和“密码”之间切换，以促进显示/隐藏效果. 需要明确的是，原始输入是 replaceWith()'ed 一个全新的输入，具有相同的属性，包括 ID，但具有不同的类型属性。

问题是当切换发生时，我之前在 jQuery 选择器中创建的全局句柄（例如 $('#password_field_id')）不再映射到密码字段。

是否有可以在选择器上运行的 jQuery 函数，该选择器将从当前 DOM 中重新选择其原始 CSS 选择器？

替换输入的函数如下：

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 */
});

由于此事件绑定到表单元素，因此您可以根据需要添加和删除输入，而不必担心丢失事件。

当您在其中一个密码输入上单击或执行某些其他操作时，此事件会冒泡到随后对其进行评估的表单。如果.target匹配您的选择器（在本例中为.password_input），将调用回调函数，您可以对发生的事件做出反应。

于 2012-06-05T19:46:59.987 回答