页面加载后重新应用 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);
      });
    }
  });
});

哪个 returns 我的 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 中完全被替换了。如果没有，您可能需要以某种方式 "remove" 旧同位素实例，但像这样的事情就是您需要做的。

Answer 2

将您的代码添加到函数中

function func() {
    $('.gridlist').isotope({
        itemSelector: '.masonryitem',
        layoutMode: 'masonry',
    });
}

然后您可以调用该函数并在您需要的任何时候应用您的同位素

页面加载后重新应用 javascript

Re apply javascript after pageload

javascript

jquery

jquery-masonry