页面加载后重新应用 javascript答案

【问题标题】：Re apply javascript after pageload页面加载后重新应用 javascript
【发布时间】：2017-11-03 11:11:17
【问题描述】：

我的砌体代码有问题。

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

对此我能做些什么？

【问题讨论】：

标签： javascript jquery jquery-masonry

【解决方案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 中被完全替换。如果没有，您可能需要以某种方式“移除”旧同位素实例，但您需要这样做。

【讨论】：

谢谢，这很简单，应该考虑一下。它有效！

【解决方案2】：

将代码添加到函数中

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

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

【讨论】：