Динамические поля формы и Drag and Drop

232
19 июля 2018, 18:00

Есть таблица в которой динамические создаются строки с input (календарь) эти поля можно перемещать (Drag and Drop).

Всё вроде работает и события навешиваются на input, но при нажатии на кнопку добавить, значения всех input сбрасываютя.

Вот код:

$(document).ready(function() { 
  var id_num = 1; 
 
  $('#table-drop').on('click', '.plus', function() { 
 
    $('.tr-plus').before( 
 
      '<tr id="dateId-' + id_num + '" class="new-tr">' + 
      '<td class="dragHandle" >&nbsp;</td>' + 
      '<td><input class="date_pic form-control"> </td>' + 
      '<td></td>' + 
      '<td><span class="btn  btn-danger minus pull-right">-</span></td>' + 
      '</tr>' 
    ); 
 
    id_num++; 
 
    droper(); // Функция DragAndDrop 
    calendar(); // Функция выбора даты и времени 
 
  }); 
 
  //    Delete row 
  $(document).on('click', '.minus', function() { 
    $(this).closest('tr').remove(); 
    console.log("Delete row"); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
<table id="table-drop" cellspacing="0" cellpadding="2" class="table"> 
  <tr class="tr-plus"> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td><span class="btn btn-success plus pull-right">Добавить строку</span></td> 
  </tr> 
</table>

Answer 1

Проблема скорее всего кроется в том, что .before() взаимодействует с существующими tr элементами, сбрасывая input value.

Стоит попробовать prepend или же реализовать state объект для input значений. Тем самым имея возможность заполнять input после добавления новой строки в таблице.

CodePen

$(document).ready(function () { 
                  
        
  $('.add').click(function () { 
    var $newRow = $('<div class="row">'+ 
   '<div class="content"><input type="text"/></div>'+ 
    '<div class="remove"></div>'+ 
  '</div>');   
     
    $('.container').prepend($newRow); 
     
    $newRow.find('.remove').click(function() { 
      $newRow.remove(); 
    }); 
  }); 
});
body { 
  height: 98vh; 
  width: 98vw; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.container { 
  display: flex; 
  flex-direction: row; 
  width: 30%; 
} 
 
.container.center { 
  align-items: center; 
  justify-content: center; 
  flex-wrap: wrap;  
  max-height: 50vh; 
  overflow-y: scroll; 
} 
 
.row { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  margin-top: 5px; 
  margin-bottom: 5px; 
} 
 
.row > * { 
  margin-left: 10px; 
  margin-right: 10px; 
} 
 
.remove { 
  box-sizing: border-box; 
  background-color: #7fe020f1; 
  border: 5px solid #7ff020a1; 
  padding-left: px; 
  padding-right: 15px; 
  padding-left: 15px; 
  padding-bottom: 2px; 
  font-size: 28px; 
  border-radius: 35%; 
} 
 
.remove::before { 
  content: '-'; 
} 
 
.remove:hover { 
  border: 5px solid #eef020a1; 
} 
 
.add::before { 
  content: '+'; 
  margin-left: 10px; 
  margin-top: 3px; 
  display: block; 
} 
 
.add { 
  position: absolute; 
  margin-left: 30%; 
  margin-top: -340px; 
  width: 30px; 
  box-sizing: border-box; 
  background-color: #7fe040f1; 
  border: 5px solid #efe040a1; 
  padding-left: 15px; 
  padding-right: 20px; 
  width: 60px; 
  text-align: center; 
  padding-left: 7px; 
  padding-bottom: 2px; 
  font-size: 28px; 
  border-radius: 35%; 
} 
 
.add:hover { 
  border: 5px solid #2ef020a1; 
} 
 
input[type=text] { 
  height: 34px; 
}
<div class="container center"> 
  <div class="add"></div> 
</div>

READ ALSO
Получить id элемента при клике на него Vue.js
javascript

Получить id элемента при клике на него Vue.js

У меня создается список, из элементов которого по клику нужно получить id, но у меня не получается это сделатьКак можно получить id? Заранее...

 230
При oninput на &lt;textarea&gt; появляются множество строк &lt;p&gt;. При клике на &lt;p&gt; нужно получить его innerHTML
javascript

При oninput на <textarea> появляются множество строк <p>. При клике на <p> нужно получить его innerHTML

Имеется textarea#text и отдельно стоящий divПри вводе текста (oninput) формируется ajax-запрос, который выводит в div (ранее совершенно пустой) строки до 600 штук...

 190
js Плавная анимация блока
javascript

js Плавная анимация блока

Вообщем есть блок с паралаксом полный код приводить не буду он чутка большойВысота данного блока статична так же в этом блоке есть кнопка...

 217
не работает кластеризация google maps
javascript

не работает кластеризация google maps

Подключаю гугл карту, на которой расположено несколько точек, точки выводятся,но при добавлении кластеризации выводится одна точка и то кластеризация...

 210