执行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中,并通过innerHTLM填充.

以防这里也是我的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;
}

这使我能够正确地处理这些项目。感谢您的所有回答和埃里克，他删除了他的答案，但让我走上了正轨。

问候