执行AJAX请求后未应用CSS [英] CSS not applied after executing AJAX request

问题描述

在AJAX请求之后，我正在努力解决问题。我正在从数据库中请求数据。这本身很有效，我处理数据并将其添加到PHP文件中的表中。该表包含一个标题，后跟数据。然后将该表传送到显示它的主页面。我的问题是我正在尝试格式化我在PHP中创建的按钮以进行格式化。这是带有数据请求的PHP

I am struggling with an issue after an AJAX request. I am requesting data from the database. That itself works perfectly and I process the data and add it into a table within the PHP file. That table consists of a caption followed by the data. This table is then transferred to the main page where it is displayed. My problem is that I am trying to format the buttons that I create in the PHP to be formatted as well. Here's the PHP with the data request

    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文件如下所示：

As you can see I assigned a class to the buttons. I thought it was easy to use that as a formatting tag for CSS. My css file looks like the following:

.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。

Every time the code is executed, which is on the refresh of the page, the table is created but the buttons look like those ugly standard buttons and the CSS is not applied. I was able to include the style into the PHP file which then worked but that is really not how I want to structure my page. The PHPs are really only the data provider and I want to use CSS in a central location for the layouts.

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

I already use the same CSS just with another class name for other buttons and they, no matter where they are located on the page, work perfectly. Just these ones in that table I create, do not want to work.

该表嵌入一个ID为DbInfo的div中，并通过innerHTLM填充。

The table is embedded in a div which has the ID "DbInfo" and is filled via innerHTLM.

以防这里也是我的AJAX命令：

Just in case here's also my AJAX command:

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

有人可以帮忙吗？

谢谢。 ..

推荐答案

如果有人有兴趣的话。我重新构建了CSS并有明确的引用。我没有只处理类，而是添加了按钮类型。新的css看起来像这样：

just if someone is interested. I restructured my CSS and have explicit references. Instead of addressing only the class I added the button type as well. The new css looks like this:

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，他删除了他的答案，但让我走上正轨。

That allows me to address the items properly. Thanks to all your answers and Eric, who deleted his answer, but brought me on the right track.

问候

这篇关于执行AJAX请求后未应用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！