javascript - 页面加载后重新应用JavaScript

我的砌体代码有问题。

它在pageload上工作正常，但是可以过滤砖石内部的项目，我使用ajax进行此操作，并用元素替换整个div以显示过滤后的项目。

发生这种情况后，将不再应用砌体代码，并且其会崩溃。

即使页面加载后内容发生更改，我如何确保砌体仍然可用？

在我的页脚中，我有以下代码：

<script type="text/javascript">
  $(document).ready(function() {
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
  });
</script>

然后在我的custom.js中，我有以下内容：

$( document ).ready(function() {

   /* Ajax code voor aanbiedingen */
  $("#branche").on('change', function() {
    var option = $('#branche > option').filter(':selected');

    if(option.val() == 'default'){
      $.post("includes/ledenall.php", {
        filter: option.val()
      }, function(result){
        $("#content1").html(result);

      });
    }else{
      $.post("includes/leden.php?option=" + option.val(), {
        filter: option.val()
      }, function(result){
        $("#content1").html(result);
      });
    }
  });
});

这将返回我的php文件，但是这次没有应用砌体。

我该怎么办？

最佳答案

您可以在更改DOM后尝试重新应用同位素库：

/* Ajax code voor aanbiedingen */
$("#branche").on('change', function() {
  var option = $('#branche > option').filter(':selected');

  if(option.val() == 'default'){
    $.post("includes/ledenall.php", {
      filter: option.val()
    }, function(result){
      $("#content1").html(result);
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
    });
  }else{
    $.post("includes/leden.php?option=" + option.val(), {
      filter: option.val()
    }, function(result){
      $("#content1").html(result);
      $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
      });
    });
  }
});

我不知道在更新的DOM中是否完全替换了.gridlist。如果不是，则可能需要以某种方式“删除”旧的同位素实例，但是您需要这样做。