Question

将Isotope与Ajax一起使用需要哪些步骤？ Isotope如何识别容器中新添加的元素？我已经阅读过这些文档，但我在那里的任何地方都没有看到过ajax。

在我的代码中，我有一个部分，在这种情况下是同位素容器。部分使用Ajax刷新，并将新内容添加到容器中。所以我认为我已经将所有物品都添加到容器中后再次初始化它，但这并不起作用。

if(isotopeContainer.data('isotope')) {  //checking if isotope is already initialized

   isotopeContainer.isotope('destroy').isotope({
      itemSelector: '.category-item',
      layoutMode: 'fitRows'
   });
} else{initialize it...}

感谢，

Answer 1

我刚解决了这个问题，那是因为我直接调用了这个元素。在我的代码中，我隐藏了，取消隐藏容器，然后用新元素替换容器的整个内容。所以我没有委托从DOM树中获取isotopeContainer。

所以问题通过使用：$(document).find('#container')

解决了

在ajax调用之后，我检查了同位素是否仍然有效，并且没有出现！（我甚至没有手动销毁 - 其他东西正在这样做）我正在使用以下内容检查

if($(document).find('#container').data('isotope')) {}

所以在这一步我只是再次初始化同位素，这次新的元素被拾取，一切似乎都有效。由于我正在替换元素，而不是插入或追加，因此附加在我的情况下不起作用。

Answer 2

这是另一种解决方案

更换新内容后

你使用'reloadItems'再次启动它

在你的ajax成功函数之后把它放到

$container.isotope('reloadItems');                      
setTimeout(function () { $container.isotope('layout') }, 500);

希望有所帮助。

如何在Ajax中使用Isotope？

2 个答案: