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

Question

我的砌体代码有问题。

它在页面加载时工作正常，但是可以过滤砖石内部的项目，我使用 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 文件，但这次没有应用砌体。

对此我能做什么？

Answer 1

您可以在更改 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',
      });
    });
  }
});

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