Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2019, 13:49
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 42

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

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

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

Я попытался сделать что-то подобное https://jsfiddle.net/kos0760/8fp0xvy2/41/
Строки клонируются, но только тогда, когда в фокусе находятся инпуты первой строки, а не последней.
Ответить с цитированием
  #2 (permalink)  
Старый 03.12.2019, 14:04
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,202

Сообщение от kos0760
Строки клонируются, но только тогда, когда в фокусе находятся инпуты первой строки, а не последней.
На что подвешено событие - на том оно и происходит...

Как вариант:
- После клонирования убрать обработчики событий на "старых" элементах
- Повесить обработчики событий на "новые" элементы
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2019, 20:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

добавить блок по фокусу на последнем элементе
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>

Последний раз редактировалось рони, 03.12.2019 в 20:39.
Ответить с цитированием
  #4 (permalink)  
Старый 03.12.2019, 23:08
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 42

рони,
Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поставить картинку (галочку) возле поля ввода если правильно. Phoenix13 Events/DOM/Window 3 26.11.2014 17:14
Как правильно показать-скрыть блок? light Общие вопросы Javascript 0 25.04.2014 18:07
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20