Javascript-форум - Как правильно склонировать блок, если инпуты в блоке находится в фокусе

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как правильно склонировать блок, если инпуты в блоке находится в фокусе (https://javascript.ru/forum/dom-window/78994-kak-pravilno-sklonirovat-blok-esli-inputy-v-bloke-nakhoditsya-v-fokuse.html)

Как правильно склонировать блок, если инпуты в блоке находится в фокусе

Добрый день!

У формы есть блок .row с двумя инпутами (ширина и высота). Необходимо, чтобы когда любой из input последней строки .row находится в фокусе, внизу появлялся клон блока .row

Пример здесь https://nebo-skinali.ru/price.php, а именно, где задаются размеры панели в калькуляторе.

Я попытался сделать что-то подобное https://jsfiddle.net/kos0760/8fp0xvy2/41/
Строки клонируются, но только тогда, когда в фокусе находятся инпуты первой строки, а не последней.

Цитата:

Сообщение от kos0760

Строки клонируются, но только тогда, когда в фокусе находятся инпуты первой строки, а не последней.

На что подвешено событие - на том оно и происходит... ;)

Как вариант:
- После клонирования убрать обработчики событий на "старых" элементах
- Повесить обработчики событий на "новые" элементы

добавить блок по фокусу на последнем элементе

kos0760,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <style type="text/css">
.row {
  margin-top: 30px;
}

form{
   counter-reset: num;
}
form .col-form-label span:after{
   counter-increment: num ;
   content:  counter(num);

}
form .panels:last-of-type input{
    background-color: #F0E68C;
}

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
jQuery(function($) {
$('form').on('focus', '.panels:last', function() {
   $(this).clone().insertAfter(this)
})
});
  </script>


</head>

<body>

<div class="container">
  <form>
  <div class="row panels">
    <div class="col-2">
      <label for="staticEmail" class="col-form-label">Панель №<span></span></label>
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Ширина">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Высота">
    </div>
  </div>
</form>
</div>

</body>

</html>

рони,
Спасибо!