Сортировка динамических элементов в изотопе

Question

Я строю список кораблей, используя jQuery $ .each loop и JSON-файл, созданный в Google Таблицах (Tabletop.js), и пытается сортировать их с помощью Isotope.js.

jQuery создает список без каких-либо проблем. Однако, когда я нажимаю на кнопку для сортировки элементов через Isotope, ничего не происходит.

Когда я жестко задаю элементы на моей странице HTML, Isotope сортирует все без проблем.

Я смотрел по всему Интернету и не мог найти ответ.

Петля с обратным вызовом к другой функции, которая извлекает мои данные из электронной таблицы. #port - это div в моем HTML, где все идет.

Вот код, с которым я работаю.

function showInfo(data, tabletop) { 

    var shipData = tabletop.sheets('data').all(); 

    var items=[]; 

    $.each(shipData, function(i) { 

     //Put each ship in the port ^__- 
     var ship = "<div class=\"ship\"><div class=\"row\"><p class=\"name font-lg\">" + shipData[i].name + "</p><p class=\"cruise-line font-xs\">" + shipData[i].line +"</p><div class=\"ship-photo col-md-9 col-sm-9\"><img src=\"img/" + shipData[i].img + "\" class=\"img-responsive\"></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-4 col-xs-4\">Launched</div><div class=\"header font-xs col-sm-4 col-xs-4\">Length</div><div class=\"header font-xs col-sm-4 col-xs-4\">Tonnage</div></div><div class=\"row\"><div class=\"year font-lg col-sm-4 col-xs-4\">" + shipData[i].launchYear +"</div><div class=\"length font-lg col-sm-4 col-xs-4\">" + shipData[i].length + "'</div><div class=\"weight font-lg col-sm-4 col-xs-4\">" + shipData[i].tonnage + "</div></div></div><div class=\"ship-info col-md-3 col-sm-3\"><div class=\"row\"><div class=\"header font-xs col-sm-6 col-xs-6\">Max capacity</div><div class=\"header font-xs col-sm-6 col-xs-6\">Crew</div></div><div class=\"row\"><div class=\"max-passenger font-lg col-sm-6 col-xs-6\">" + shipData[i].maxCapacity + "</div><div class=\"crew font-lg col-sm-6 col-xs-6\">" + shipData[i].crewCapacity + "</div></div></div></div>"; 

      items.push(ship); 

     }); 

    $port.append(items) 
} 

Вот мой Изотоп код сортировки:

// init Isotope 
    $('#port').isotope({ 
     itemSelector: ".ship", 
     layoutMode: 'vertical', 
     getSortData: { 
      name: '.ship' 
     } 
    }) 

// bind sort button click 
$('#sorts').on('click', 'button', function() { 
    var $this = $(this); 
    var sortValue = $this.attr('data-sort-value'); 

    $('#port').isotope({ 
      sortBy: sortValue 
    }); 

    }); 

Вот мой HTML:

<div class="compare"> 
    <h3>How the ships compare</h3> 
    <div id="sorts" class="button-group"> 
       <button class="button" data-sort-value="name">name</button> 
       <button class="button" data-sort-value="length">length</button> 
       <button class="button" data-sort-value="weight">weight</button> 
       <button class="button" data-sort-value="passengers">passenger</button> 
       <button class="button" data-sort-value="original-order">clear</button>  
      </div> 
     </div> 

<div id="port"></div> 

JSFiddle demo. Один список создается в JS, а другой - в HTML.

Answer 1

Два вопроса для исправления.

Изменить #sorts к этому:

<button id="sort" data-sort-value="name">Click to sort</button> 

и данные функции для этого:

$.each(data, function (i) { 
$('.port').append("<li><div class='name'>" + data[i] + "</div></li>"); 
});