jquery - DOM 可能发生更改后，是否可以使用 "refresh"或 "rerun"jQuery 选择器？

Question

我有一个页面加载一组复杂的表单。在这组表单中，有密码字段。这些密码字段具有显示/隐藏切换开关，当单击其中任何一个时，所有密码字段都会被 DOM 中的等效项替换，其类型在“文本”和“密码”之间切换，以方便显示/隐藏效果。需要明确的是，原始输入被替换为具有相同属性(包括 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

使用事件委托(delegate)，并监听父表单上的事件:

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

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

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