使用 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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <main> <h2 style="font-size:28px;">Shop by Category</h2> <div class="gridmine" id="grid"> <div class="soman title"> <button class='request_1 showme' id='rating_1' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);"> <h3> Rice, Grains &amp; Flours</h3> </button> </div> <div class="soman title1"> <button style="background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);"> <h3>Dals, Pulses &amp; Seeds</h3> </button> </div> <div class="soman title2"> <button style="background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);"> <h3>Sugar &amp; Salts</h3> </button> </div> </div> </main>

当用户单击该框时，我正在使用 AJAX 和 PHP 获取数据并将其显示为替换相同的网格。

PHP 代码：

 <?php $request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']); $request_moreinfo = preg_replace("/[^0-9]/","",$_REQUEST['moreinfo']); if($request_id=="1") { echo "<div id='grids' class='gridmine'> <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>"; }?>

我对两个网格中的所有内容都使用相同的 class。 第一个网格正在正确显示，但是来自 AJAX PHP 请求的第二个网格没有像第一个那样正确显示，它的宽度更小。

谁能告诉我这里有什么问题？ 提前致谢。

Answer 1

您将#grid的innerHTML设置为本质上相同的元素，包括容器。 如果您删除容器，它应该可以工作：

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元素替换它。