JavaScript同位素类在AJAX之后没有加载 - JavaScript Isotope classes not loaded after AJAX

我正在从mySQL数据库中提取最近的50条记录。每个都进入具有同位素的DIV并且工作完美- DIV动画，重置等。

使用AJAX使用OFFSET调用接下来的50条记录，但是，新记录加载到新的div中，但是同位素的类不应用于它们(通过Web Inspector可以看到)

设置:

index.php =在浏览器中加载时调用数据库，同位素工作正常。一个链接在index.php (#update_newImages)触发一个监听器加载"load-ajax.php"

load-ajax.php =一个只有SQL SELECT和PDO循环的外部页面。这些记录加载但没有应用同位素，因此出现问题。

代码来自index.php

 ...database connection info and query code go here
 $filter = ""; // appears in the echo'd DIV below, for filtering the ISOTOPE divs. Turned off til this injection problem is solved
 //ISOTOPE SETTINGS, in <HEAD>
 var $container = $('#theContent');
 $container.isotope({
 layoutMode : 'fitRows', //leave blank for default masonry
 filter: '*',
 animationOptions: {
 duration: 750,
 easing: 'linear',
 queue: false,
 }
 });

in BODY:
<div id="theContent">
<?php  
for($i=0; $links = $query_links->fetch(); $i++){
echo "<div class='"".$filter." box'"><a href='"#'" data-filter='"." . $filter . "'" class='"theCat " . $filter . "'">" . $links['ATtitle']."</a><br>" .  "#" . $links['LID']."-
<a href='"". $links['URL']."'" target='"_blank'" class='"theURL'">". $links['descr']."</a></div>";
}
?>
</div><!-- theContent -->

<script> // RIGHT BEFORE BODY TAG CLOSES
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
  event.preventDefault();
     offset_newImages += 50; // increments batches of records
     $.get('load-ajax.php?loadDataType=newImages&offset='+offset_newImages, function(data) {
      $("#theContent").hide().html(data).fadeIn(600);
//**EDIT**
     alert('Load was performed.'); // callback on success, works - is this where the Isotope "appended" code would go?
    }, false);
   });
</script>

代码来自load-ajax.php

...database connection info goes here
$offset = $_GET["offset"]; // from URL
$filter = ""; // for filtering the ISOTOPE divs, turned off til the injection problem is solved
for($i=0; $links = $query_links->fetch(); $i++){
    $showList = "<div class='"".$filter." box'"><a href='"#'" data-filter='"." . $filter . "'" class='"theCat " . $filter . "'">" . $links['ATtitle']."</a><br>" .  "#" . $links['LID']."-
<a href='"". $links['URL']."'" target='"_blank'" class='"theURL'">". $links['descr']."</a></div>";
echo $showList; // this is where ISOTOPE is not applied after each AJAX injection
}

我想有一个回拨解决方案，但我不确定下一步该怎么做。

注意:我已经试验了同位素+无限滚动由保罗爱尔兰，但不能在这里使用它，直到我可以转换无限滚动的分页机制从mySQL到JSON。下一个项目。

编辑:我修改了index.php，如下所示。这个问题仍然存在，但我认为它几乎已经解决了。ajax正在工作，但是当同位素启动时，它没有在新的div上添加它的类。

<head>

<script type="text/javascript">
$(document).ready(function(){
//ISOTOPE SETTINGS
var $container = $('#container');
$container.isotope({
       layoutMode : 'fitRows', //leave blank for default masonry
       filter: '*',
       animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});
});
</script>

右移到</body> :

<script>
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
 offset_newImages += 50;
 $.ajax({
    type: 'GET',
    url: "load-ajax.php?offset="+offset_newImages,
    success:function(data){
          //    alert(data); // works
          $("#container").hide().html(data).fadeIn(600) // fades in the new recordset
          $container.isotope('insert', data); 
      }
  });
});
</script>

那么总结一下，新数据加载到div中-我可以看到它，直到我以任何方式调整浏览器窗口的大小，这就是同位素发挥作用并隐藏新div的地方。

同位素有许多方法可以在动态插入新内容后重新计算布局。