Сортируемый jquery не работает на динамически добавляемых элементах

Question

Я пытаюсь заставить работать .sortable из jQuery UI, но он работает только для моего первого элемента, когда я динамически добавляю новые, он перестает работать.

Я нашел это: http://api.jqueryui.com/sortable/#method-refresh, который должен обновить все и распознать новые предметы, но когда я использую это, я получаю ошибку:

Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'refresh'

Что я могу сделать?

Мой код:

// HTML template for new fields
  const template = `<div class="row sortwrap">
<div class="col-md-8">
<input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />
<i class="mdi mdi-sort dragndrop"></i>
<div class="questionlist">
  <div class="row">
    <div class="col-md-8">
      <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />
    </div>
    <div class="col-md-4">
      <button class="btn btn-success questionbutton">Extra vraag</button>
    </div>
  </div>
</div>
</div>
<div class="col-md-4">
<button id="addcategory" class="btn btn-danger btn_remove">X</button>
</div>
</div>`;

const vraagTemplate = `<div class="row">
<div class="col-md-8">
<input type="text" name="question[]" class="form-control name_list questioninput" />
</div>
<div class="col-md-4">
<button class="btn btn-danger btn_remove">X</button>
</div>
</div>`;
$('.sortwrap').sortable();
// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {

  // Sortable code
  $('.sortwrap').sortable("refresh");

  $('#dynamic_field input[name^=cat]').each(function(i) {
    $(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
  });
  $('#dynamic_field .sortwrap').each(function(i) {
    $(this).attr("id", i + 1);
  });
  $('#dynamic_field .questionlist').each(function() {
    $(this).find('input[name^=qu]').each(function(i) {
      $(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
    });
  });
}

// Append category template
$('#addcategory').click(function() {

  $('#dynamic_field').append($(template));
  updatePlaceholders();
});

// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
  $ql = $(this).closest('.questionlist');
  $ql.append($(vraagTemplate));
  updatePlaceholders();
});

// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
  $(this).closest('.row').remove();
  updatePlaceholders();
});

Если я удалю строку с надписью refresh в моей функции и в моем коде будет только одна .sortable, тогда я смогу перетащить все элементы, даже новые, но ничего не пропадет.Так что я могу перетаскивать, но не сортировать / отбрасывать.

Answer 1

Я думаю, это то, где вы прикрепляете свой вид.Для этого я использовал обертку.

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

// HTML template for new fields
const template = '<div class="row sortwrap">    <div class="col-md-8">    <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />    <i class="mdi mdi-sort dragndrop"></i>    <div class="questionlist">      <div class="row">        <div class="col-md-8">          <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />        </div>        <div class="col-md-4">          <button class="btn btn-success questionbutton">Extra vraag</button>        </div>      </div>    </div>    </div>    <div class="col-md-4">    <button id="addcategory" class="btn btn-danger btn_remove">X</button>    </div>    </div>';

const vraagTemplate = '<div class="row">  <div class="col-md-8">    <input type="text" name="question[]" class="form-control name_list questioninput" />    </div>    <div class="col-md-4">    <button class="btn btn-danger btn_remove">X</button>    </div>    </div>';

// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {
  // Sortable code
// $('#dynamic_field').sortable( "refresh" );
  let df = $('#dynamic_field');
  df.find('input[name^=cat]').each(function(i) {
    $(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
  });
  df.find('.sortwrap').each(function(i) {
    $(this).attr("id", i + 1);
  });
  df.find('.questionlist').each(function() {
    $(this).find('input[name^=qu]').each(function(i) {
      $(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
    });
  });
}
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
  let $ql = $(this).closest('.questionlist');
  $ql.append($(vraagTemplate));
  updatePlaceholders();
});

// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
  $(this).closest('.row').remove();
  updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
  $('#dynamic_field').append(t);
  updatePlaceholders();
});

$(function() {
  $('#addcategory').trigger('click');
  $('#dynamic_field').sortable();
});

.sortwrap{border: solid green 1px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <button id="addcategory">add</button>
</div>
<div id="dynamic_field"></div>

Answer 2

Как упомянуто выше, это будет работать нормально. Это выглядит многообещающе:

http://api.jqueryui.com/sortable/#method-refresh

кажется, что вы можете просто добавить элемент в сортируемую, а затем позвонить

$('#mysortable').sortable('refresh')

чтобы распознать его.

var counter = 1;
function appendThing() {
$("<li id='Text" + counter + "' class='ui-state-default'>Text" + counter + "</li>").appendTo($("#mySortable"));
$("#mySortable").sortable({ refresh: mySortable })
counter++;   
};

пожалуйста, взгляните на это

https://jsfiddle.net/6ztrdg9n/