Форум

kos0760 · #1 (**permalink**) 03.12.2019, 13:49

Добрый день!

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

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

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

ksa · #2 (**permalink**) 03.12.2019, 14:04

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

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

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

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

рони · #3 (**permalink**) 03.12.2019, 20:36

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>

kos0760 · #4 (**permalink**) 03.12.2019, 23:08

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

Форум

Справочник

Discord чат

Курсы javascript