使用 AJAX 调用 HTML 数据时网格框显示错误

Question

我使用 HTML 和 CSS 设计了一个网格。当用户单击网格时，我使用 PHP 和 AJAX 显示另一个网格。

我的代码：

$(document).ready(function() {

  $(document).on('click', '.showme', function() {

    var id = $(this).attr("id");

    var num = $(this).attr("class");

    var poststr = "request=" + num + "&moreinfo=" + id;

    $.ajax({enter code here

      url: "http://kiranasaman.com/mobiledesign/testme.php",

      cache: 0,

      data: poststr,

      success: function(result) {

        document.getElementById("grid").innerHTML = result;

      }

    });

  });

});

main {

  display: block;

  box-sizing: border-box;

  width: 90%;

  margin: 1em auto;

  padding: 1em 2em;

  color: #000;

  background-color: rgba(204, 204, 204, .7);

  border: .07em solid rgba(0, 0, 0, .5);

  border-radius: .5em;

}

button {

  text-align: center;

  font-size: 100%;

  border-radius: 1em;

  border: .1em solid #333;

  padding: 1em;

  width: 8em;

  margin: .25em;

  width: 23%;

}

button strong {

  display: block;

  box-sizing: border-box;

  line-height: 1.35;

  width: 1.5em;

  height: 1.5em;

  text-align: center;

  font-size: 200%;

  background-color: #000;

  color: #fff;

  border-radius: 50%;

  margin: 0 auto;

  border: .1em solid #fff;

}

button:hover,

button:focus {

  background-color: #060;

  box-shadow: 0 0 1em rgba(0, 0, 0, .5);

  color: #fff;

  outline: none;

}

.gridmine {

  display: -ms-grid;

  -ms-grid-columns: auto 1fr;

  -ms-grid-rows: auto 1fr auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: auto minmax(min-content, 1fr) auto;

}

.title {

  -ms-grid-column: 1;

  -ms-grid-row: 1;

  grid-column: 1;

  grid-row: 1;

}

.title1 {

  ms-grid-column: 2;

  -ms-grid-row: 1;

  grid-column: 2;

  grid-row: 1;

}

.title2 {

  ms-grid-column: 3;

  -ms-grid-row: 1;

  grid-column: 3;

  grid-row: 1;

}

.gridmine button {

  width: 100%;

  height: 100%;

  margin: 0;

}

.gridmine button:hover {

  background-color: #73090D;

}

.gridmine .soman {

  height: 200px;

  font-size: 24px;

}

Answer 1

您将innerHTMLof设置#grid为本质上相同的元素，包括容器。如果删除容器，它应该可以工作：echo "&nbsp; &nbsp; &nbsp; &nbsp; <div class='soman titles'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class='request_2 seeme' id='rating_2' style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>&nbsp; Rice</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='soman title1s'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button style='background: linear-gradient(to right, #ff9a9e&nbsp; 0%, #fad0c4 100%);'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h3>Grains</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='soman title2s'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button style='background: linear-gradient(to right, #a1c4fd&nbsp; 0%, #c2e9fb 100%);'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Flours</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>";div然后它会将其替换为带有按钮的三个元素。