Question

我有一个页面加载了一组复杂的表单。在这组表单中，有密码字段。这些密码字段具有显示/隐藏切换开关，当点击其中任何一个时，所有密码字段都被替换为DOM中的等价物，其类型在“文本”和“密码”之间切换以便于显示/隐藏效果。为了清楚起见，原始输入是replaceW（）一个具有相同属性的全新输入，包括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对象为每个元素使用相同的选择器并覆盖原始句柄？

Answer 1

使用事件委派，并监听父窗体上的事件：

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

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

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

在DOM可能已更改后，是否可以“刷新”或“重新运行”jQuery选择器？

1 个答案: