Изотоп добавить элемент флексбокс сетки

Question

Почти сделано с моим проектом, только одна вещь не работает должным образом. Я использовал Изотоп для удаления элементов, и это прекрасно работает. Элемент удаляется, и следующий элемент перемещается на свое место. Теперь я хочу добавить элементы в сетку. Если я удаляю функциональность Isotope, все это работает, но я хочу, чтобы оно работало вместе с Isotope (из-за хороших переходов и т. Д.). Если я использую свой текущий код, ничего не происходит, кроме последнего элемента (он клонируется, но не добавляется в сетку).

Воспроизвести проблему:
- Нажмите на Добавить пользователя
- Ничего не произошло

За работой:
- Удалить файл изотопа js из заголовка и файл изотопа js из файла JS (строки с 7 по 16)
- Нажмите на Добавить пользователя
- Пользователь добавляется в сетку красиво

Вот фрагмент моего JS:

  $('.js-add-user').on( 'click', function(e) {
    e.preventDefault();
    $('.js-grid-item:last').clone().insertAfter($('.js-grid .js-grid-item:last'));
});

Смотри мою скрипку:

https://jsfiddle.net/r3c05odv/3/

Кто-нибудь может мне помочь, пожалуйста!

Answer 1

Вы можете использовать метод добавления изотопа:

$('.js-add-user').on( 'click', function(e) {
    e.preventDefault();
    var $items = $('.js-grid-item:last').clone();
 // append items to grid
 $grid.append( $items )
// add and lay out newly appended items
  .isotope( 'appended', $items );   
 });

Единственная проблема, так как вы используете $('.js-grid-item:last').clone();, если вы удалите все элементы, нет "последнего" клонировать.