javascript - Input problems in javascript

Question

I'm having a problem when i create inputs from a button: 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)

The inputs doesn't work, anyone know why?

标签： javascriptjqueryhtml

Answer 1

It doesn't work as you are setting the entire content within <button> tag.

You can actually verify this,Click & Press the input. When you are pressed, you can actually type into the input element. But when you release everythign gets cleared. You are not able to get the edit button as onClickListener of button is active in foreground.

Simple solution is to clear the entire content and then add the html into <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">
...

You can checkout the JSFiddleDemo here