使用 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 "

        <div class='soman titles'>

          <button class='request_2 seeme' id='rating_2' style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3>  Rice</h3>

          </button>

        </div>

        <div class='soman title1s'>

          <button style='background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);'>

             <h3>Grains</h3>

          </button>

        </div>

        <div class='soman title2s'>

          <button style='background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);'>

            <h3>Flours</h3>

          </button>

        </div>

";

div然后它会将其替换为带有按钮的三个元素。