Question

我正在尝试在动态添加+删除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中使用，但不能在选项框中使用

Answer 1

您必须稍微修改一下代码

您必须在每个创建的div上添加sortable

执行以下操作：-

$('.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 sortable on dynamically created divs

注意：-您需要更改删除代码，如下所示：-

$('.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>

动态添加+删除div中的可排序div

2 个答案: