Javascript превращает div в форму по нажатию кнопки

Question

Я пытаюсь превратить строку пароля в поле ввода, когда нажата кнопка «изменить пароль». Я на полпути там уже использую Jquery. Поэтому я сделал так, чтобы при нажатии «изменить пароль» поле ввода добавлялось. Также, когда они нажимают «назад», отображается исходное состояние. Если вы посмотрите на кодовую ручку, вы заметите, что после нажатия «назад» вы не сможете снова нажать «изменить пароль», jquery не работает. Есть ли решение для этого?

Также я использовал jquery 'replaceWidth', есть ли лучший способ сделать это? Я вкладываю много html в мой Jquery и не уверен, что это лучший способ сделать это.

Пожалуйста, посмотрите!

https://codepen.io/liamdthompson/pen/WYwXeK

$("#change").click(function () {
  $("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
  $(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');


  $("#yeet").click(function () {
    $(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
    $("#zing").replaceWith('<div class="" id="container">*********</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
  <div class="row">
  </div>

  <div class="row">
      <div class="col">
          <h6> Password</h6>
      </div>
      <div class="col" id="container">
          *********
      </div>
  </div>

  <button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>

Answer 1

При повторном подключении кнопки необходимо снова подключить прослушиватель событий.

В противном случае другое решение заключается в использовании производного события в родительском классе, т.е.

$('body').on('click', '#change', function(){});

Это повлияет на любой элемент с идентификатором change, который имеет body в своей линии предков.

Answer 2

Это потому, что ваше событие #change on click привязывается к элементу dom при загрузке страницы.

Чтобы привязать события к динамически создаваемым элементам, привязайте к документу, используя функцию .on, например this .