Как привязать динамический DIV к плагину Jquery Masonry?

Question

В моем HTML есть несколько DIV, которые я загружаю динамически, используя AJAX.

$("#workPanel").load("ex.html");

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

            $('#filtering-nav li.1 a, li.2 a, li.3 a').click(function(){
               $('#primary').masonry();

                 return false;
              });

$('#primary').masonry({
            columnWidth: 100, 
            itemSelector: '.box:not(.invis)',
            animate: true,
            animationOptions: {
            duration: speed,
            queue: false
            }
        });

Перестановка работает нормально после первой загрузки страницы, но когда обновляются динамические DIV, перестановка больше не работает. Я предполагаю, что функция live () или bind () должна быть где-то вызвана, но я не знаю, как и где необходимо выполнить привязку. Пожалуйста, помогите мне здесь.

Заранее спасибо!

Answer 1

Вот пример динамического добавления предметов в кладочную коллекцию:

http://masonry.desandro.com/demos/adding-items.html

По сути, вам необходимо вызвать опцию «перезагрузить» кладку.

Например, чтобы вставить элемент jQuery "newElement" в #holder div:

jQuery("#holder").prepend(newElement).masonry('reload')

Answer 2

Вы загружаете это как:

$('#primary').masonry({
    columnWidth: 100, 
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false
    }
});

Хорошо, значит, вы определили параметры кладки.Теперь, сразу после этого, давайте создадим функцию и свяжем некоторые события:

var masonryUpdate = function() {
    setTimeout(function() {
        $('#primary').masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

Никогда не беспокойтесь об этом снова!

Answer 3

Я думаю вот что вы ищете:

Чтобы снова запустить масонство, вам нужно перетасовать, когда .load() завершится, вы можете сделать это, запустив его в качестве функции обратного вызова, например:

$("#workPanel").load("ex.html", function() {
  $('#primary').masonry();
});