Question

我的Masonry插件存在问题。

我尝试在div容器#myparts中加载新内容。

Ajax工作但div容器.part相互重叠，我不知道为什么。

我尝试过很多来自互联网的解决方案，但它们不起作用。在AJAX之后，砌体应该重新加载.parts，但它不起作用。

这是我的代码：

<body>
<!--

 data-user: is user-ID
 data-article: is article-ID

-->

<div id="wrapper">
<div id="myparts" data-user="1">
    <div class="part" data-article="1"></div>
    <div class="part" data-article="2"></div>
    <div class="part" data-article="3"></div>
    <div class="part" data-article="4"></div>
</div>
<div id="button"></div>
</div>
</body>

我的jQuery代码：

 // My Ajax
 $(document).on("click", "#wrapper > #button", function () {

 var $grid = $("#wrapper > #myparts").masonry({columnWidth: 22, itemSelector: '.part', isFitWidth: true}); // Masonry plugin

 var user_d = $("#wrapper > #myparts").data("bid");
 var article_id = $("#wrapper > #myparts > .part").last().data("article");

 $("#pleasewait").fadeIn(); // open progressbar.

 $.ajax({
  url: "ajax/new-content.php",
  method: "POST",
  data: {user: user_d, article: article_id},
  dataType: "html",
  cache: false,
  success: function (data) {
  if (data !== '') {
   $("#wrapper > #myparts").append(data); // Ajax work.
  } else {
    $("#wrapper > #myparts > #button").remove(); // Remove button if no more content in database
  $grid.masonry();
  }
 },
 complete: function () {
  $("#pleasewait").fadeOut(500); // close progressbar.
 }
 });
 });

Answer 1

尝试在按钮点击功能之外初始化您的砌体，这样做并不依赖于它（除非您想要的是这样）。

并查找您的user_d变量，该变量应该从#wrapper > #myparts元素中获取数据属性，但您将bid数据传递给它属性。

使用您的代码查看此版本：

<div id="wrapper">
    <div id="myparts" data-user="1">
        <div class="part" data-article="1">
          <img src="https://loremflickr.com/320/240" alt="">
        </div>
        <div class="part" data-article="2">
          <img src="https://loremflickr.com/320/240" alt="">
        </div>
        <div class="part" data-article="3">
          <img src="https://loremflickr.com/320/240" alt="">
        </div>
        <div class="part" data-article="4">
          <img src="https://loremflickr.com/320/240" alt="">
        </div>
    </div>
    <div id="button" style="margin-top: 250px; border: 1px solid black; width: 150px;">I'm a button</div>
  </div>

我想你在每个part div中都有一些元素（按钮只是按照内容设置的样式）。

<script>
    var $grid = $("#wrapper > #myparts").masonry({
      columnWidth: 320,
      itemSelector: '.part',
      isFitWidth: true
    }); // Masonry plugin

    $('#button').click(function () {
      let user_d = $("#wrapper > #myparts").data("user"),
          article_id = $("#wrapper > #myparts > .part").last().data("article");

      $("#pleasewait").fadeIn(); // open progressbar.

      $.ajax({
        url: "ajax/new-content.php",
        method: "POST",
        data: {
          user: user_d,
          article: article_id
        },
        dataType: "html",
        cache: false,
        success: function (data) {
          if (data !== '') {
            console.log(data);
            let $items = $(data);
            $grid.append( $items ).masonry( 'appended', $items );
          } else {
            // Remove button if no more content in database
            $("#wrapper > #myparts > #button").remove();
            $grid.masonry();
          }
        },
        complete: function () {
          $("#pleasewait").fadeOut(500); // close progressbar.
        }
      });
    });
  </script>

在您的脚本中，在Click事件之外初始化grid砌体，然后发出AJAX请求，传递正确的数据：

 let user_d = $("#wrapper > #myparts").data("user"),
      article_id = $("#wrapper > #myparts > .part").last().data("article");

然后在你的成功回调中做项目的追加，＆＃34;转换＆＃34;他们每个人都使用它的jQuery版本，这是：

if (data !== '') {
  console.log(data);
  let $items = $(data);
  $grid.append( $items ).masonry( 'appended', $items );
}
...

我的ajax/new-content.php文件只检查数据是否已发送，并返回要附加的div：

<?php

if (isset($_POST['user']) && isset($_POST['article'])) {
  echo '<div class="part" data-article="5"><img src="http://loremflickr.com/320/240" alt=""></div>';
}

这是Codepen中的演示pen。

Mansory在jQuery Ajax之后无法正常工作

1 个答案: