javascript - 如何在 Ajax 中使用同位素？

Question

通过 Ajax 使用 Isotope 需要执行哪些步骤？ 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

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

因此问题可以通过使用以下方法解决:$(document).find('#container')

此外，在 ajax 调用之后，我检查了同位素是否仍然有效，并且看起来并非如此! (我什至没有手动销毁 - 有其他东西在做) 我正在使用以下内容来检查

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

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