Сортируемый div в динамическом добавлении + удалении div

Question

Я пытаюсь добавить сортируемую опцию в динамическом add + remove div

$('.add').click(function() {
  $('.added:last').after('<div class="addedline col-md-12"><div class="row"><div class="sort d-flex align-items-center"><i class="fa fa-bars"></i></div><div class="col-md-3 col-sm-12"><label>Item Name</label><input class="form-control"></div><div class="col-md-4 col-sm-12"><label>Description</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Size</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Quantity</label><input class="form-control"></div><div class="col-md-2 col-sm-12 remove"><input type="button" class="btn btn-info" value="Remove" /></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
  $(this).parent().remove();
});
(function() {
  $( "#sortable" ).sortable();
});

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="added col-md-12">
    <span class="add"><input type="button" class="btn btn-info" value="+ Add Items" /></span>
  </div>
</div>

Его работа в отдельном div, но не в optionbox

Answer 1

Вы должны немного изменить свой код

Вы должны добавить sortable к каждому созданному div

Сделайте, как показано ниже: -

$('.add').click(function() {
  $('.added:last').append('<div class="addedline col-md-12"><div class="row"><div class="sort d-flex align-items-center"><i class="fa fa-bars"></i></div><div class="col-md-3 col-sm-12"><label>Item Name</label><input class="form-control"></div><div class="col-md-4 col-sm-12"><label>Description</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Size</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Quantity</label><input class="form-control"></div><div class="col-md-2 col-sm-12 remove"><input type="button" class="btn btn-info" value="Remove" /></div></div></div><br>');
  $('.optionBox').sortable({
    items: ".addedline"
  });
});
$('.optionBox').on('click', '.remove', function() {
  $(this).parent().remove();
});

Рабочая скрипка: - https://jsfiddle.net/vh1y5cek/

ссылка получена: - Jquery сортируется по динамически создаваемым элементам div

Примечание: - вам необходимо изменить код удаления, как показано ниже: -

$('.optionBox').on('click', '.remove', function() {
  $(this).closest('.addedline').remove();
});

Answer 2

Ваш код работает нормально. Вам просто нужно удалить старый скрипт, который является версией 1.12.0.

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

$('.add').click(function() {
  $('.added:last').after('<div class="addedline col-md-12"><div class="row"><div class="sort d-flex align-items-center"><i class="fa fa-bars"></i></div><div class="col-md-3 col-sm-12"><label>Item Name</label><input class="form-control"></div><div class="col-md-4 col-sm-12"><label>Description</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Size</label><input class="form-control"></div><div class="col-md-1 col-sm-12"><label>Quantity</label><input class="form-control"></div><div class="col-md-2 col-sm-12 remove"><input type="button" class="btn btn-info" value="Remove" /></div></div></div>');
});
$('.optionBox').on('click','.remove',function() {
  $(this).parent().remove();
});
(function() {
  $( "#sortable" ).sortable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
  <div class="added col-md-12">
    <span class="add"><input type="button" class="btn btn-info" value="+ Add Items" /></span>
  </div>
</div>