Question

我在通过按钮创建输入时遇到了问题：https://jsfiddle.net/bg0cv2az/

let liberatePasswordButtonClickHandler = e => {
    e.preventDefault()
    let idButtonPassword = $(e.currentTarget).closest('#password-changer')
    if (idButtonPassword = '#password-changer') {
        $(e.currentTarget).html(`<div class="left-column">
                   <div class="imput-wrapper top">
                     <div class="imput-title">
                       <span><strong>New passoword</strong></span>
                     </div>
                     <input type="password" placeholder="New passoword here"/>
                   </div>
                   <div class="imput-wrapper">
                     <div class="imput-title">
                       <span><strong>Re-enter new password</strong></span>
                     </div>
                     <input type="password" placeholder="Re-enter new password here"/>
                   </div>
                 </div>`)
    }

}
$(document).on('click', '#password-changer', liberatePasswordButtonClickHandler)

输入无效，有人知道为什么吗？

Answer 1

当您在<button>标记中设置整个内容时，此操作无效。

您实际上可以验证此，单击并按输入。按下时，实际上可以键入输入元素。但是当您释放所有东西时，都会清除所有东西。您无法获得编辑按钮，因为按钮的onClickListener在前台处于活动状态。

简单的解决方案是先清除全部内容，然后将html添加到<div>

...
if (idButtonPassword = '#password-changer') {
                $(e.currentTarget).parent().empty() // <- modified line
               .html(`<div class="left-column">
                   <div class="imput-wrapper top">
                     <div class="imput-title">
...

您可以检出JSFiddleDemo here

Answer 2

发生的事情是，每当您单击一个输入时，都会生成一整套新的输入，而旧的输入将被替换。

因此，如果您在#password-changer（一个div）内单击任何内容，信号就会传播，并用新的输入替换整个div内部。

如果我正确理解问题，这是一种解决方案：

let liberatePasswordButtonClickHandler = e => {
    e.preventDefault()
    $('#password-changer').html(`
        <div class="left-column">
        <div class="imput-wrapper top">
            <div class="imput-title">
                <span><strong>New passoword</strong></span>
            </div>
            <input type="password" placeholder="New passoword here"/>
        </div>
        <div class="imput-wrapper">
            <div class="imput-title">
                <span><strong>Re-enter new password</strong></span>
            </div>
            <input type="password" placeholder="Re-enter new password here"/>
        </div>
      </div>`);
};
$(document).on('click', '#password-changer .button-edit', liberatePasswordButtonClickHandler)

说明：

$(document).on('click', '#password-changer .button-edit', liberatePasswordButtonClickHandler)每当在ID为liberatePasswordButtonClickHandler的容器中单击类button-edit时便应用函数password-changer
$('#password-changer').html(...)仅替换父div的内部结构（这很简单，因为它具有一些ID）

如果您想对此进行更一般的介绍，可以：

将#password-changer更改为.password-changer以引用类而不是ID
然后在替换html时在内部执行类似$(e.target).parents('.password-changer').first().html(...)的操作（这会获得类password-changer的最接近的父级）

JavaScript输入问题

2 个答案: