php - 执行 AJAX 请求后未应用 CSS

Question

在 AJAX 请求后，我遇到了一个问题。我正在请求数据库中的数据。它本身运行良好，我处理数据并将其添加到 PHP 文件中的表中。该表由标题和数据组成。然后该表被传送到显示它的主页。我的问题是我正在尝试格式化我在 PHP 中创建的按钮以进行格式化。这是带有数据请求的 PHP

    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $sql = "SELECT LoginName FROM table";

    $res = mysqli_query($conn, $sql);

    if (mysqli_num_rows($res) > 0) {

        echo "<center>";
        echo "<table border='1'>";
        echo "<tr>";
        echo "<td>User</td>";
        echo "<td colspan=2 align=center>Available Functions</td>";
        echo "</tr>";

        while($row = mysqli_fetch_assoc($res)) {
            echo "<tr>";
            echo "<td>" . $row['User'] . "</td>";
            echo "<td><button type='button' class='smallbutton'>Delete User</button></td>";
            echo "<td><button type='button' class='smallbutton'>Change Password</button></td>";
            echo "</tr>";
        }
        echo "</table>";
        echo "</center>";
    } else {
        echo "";
    }

    mysqli_close($conn);

如您所见，我为按钮分配了一个类。我认为将其用作 CSS 的格式标记很容易。我的 CSS 文件如下所示:

.smallbutton {
font-size:16px;
padding: 10px 10px;
border: none;
background-color: #008CBA;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
color: white; }

每次在页面刷新时执行代码，都会创建表格，但按钮看起来像那些丑陋的标准按钮，并且未应用 CSS。我能够将样式包含到 PHP 文件中，然后可以正常工作，但这实际上不是我想要构建页面的方式。 PHP 实际上只是数据提供者，我想在布局的中心位置使用 CSS。

我已经为其他按钮使用了相同的 CSS，只是使用了另一个类名，无论它们位于页面的哪个位置，它们都能完美地工作。只有我创建的那个表中的这些，不想工作。

该表嵌入到 ID 为“DbInfo”的 div 中，并通过 innerHTML 填充。

以防万一，这也是我的 AJAX 命令:

$(document).ready(function(){
$.ajax({
    method: "POST",
    url: "UserData.php",
    success: function(data){
        $("#DbInfo").innerHTML = data;
    }
});  });

有人可以帮忙吗？

谢谢...

Answer 1

只要有人感兴趣。我重组了我的 CSS 并有明确的引用。我没有只处理类，而是还添加了按钮类型。新的 CSS 看起来像这样:

button[type=button].abutton {
    font-size:16px;
    padding: 15px 15px;
    border: none;
    background-color: #008CBA;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    color: white;
}

button[type=button].smallbutton {
    font-size:16px;
    padding: 10px 10px;
    border: none;
    background-color: #008CBA;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    color: white;
}

这使我能够正确处理这些元素。感谢您的所有回答和 Eric，他删除了他的回答，但让我走上了正确的轨道。

问候