CSS no aplicado después de ejecutar la solicitud AJAX

Estoy luchando con un problema después de una solicitud AJAX. Estoy solicitando datos de la base de datos. Eso funciona perfectamente, proceso los datos y los agrego a una tabla dentro del archivo PHP. Esa tabla consiste en un título seguido por los datos. Esta tabla se transfiere a la página principal donde se muestra. Mi problema es que estoy tratando de formatear los botones que creo en el PHP para ser formateado también. Aquí está el PHP con la solicitud de datos.

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 ""; echo ""; echo ""; echo ""; echo ""; echo ""; while($row = mysqli_fetch_assoc($res)) { echo ""; echo ""; echo ""; echo ""; echo ""; } echo "
UserAvailable Functions
" . $row['User'] . "
"; echo ""; } else { echo ""; } mysqli_close($conn);

Como puedes ver asigné una clase a los botones. Pensé que era fácil de usar eso como una etiqueta de formato para CSS. Mi archivo css se parece a lo siguiente:

 .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; } 

Cada vez que se ejecuta el código, que se encuentra en la actualización de la página, se crea la tabla, pero los botones se parecen a esos botones estándar feos y no se aplica el CSS. Pude incluir el estilo en el archivo PHP que luego funcionó, pero no es así como quiero estructurar mi página. Los PHP son realmente solo el proveedor de datos y quiero usar CSS en una ubicación central para los diseños.

Ya uso el mismo CSS con otro nombre de clase para otros botones y, sin importar dónde se encuentren en la página, funcionan perfectamente. Solo estos en esa tabla que creo, no quiero trabajar.

La tabla está incrustada en un div que tiene el ID “DbInfo” y se llena a través de innerHTLM.

Por si acaso aquí también está mi comando AJAX:

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

¿Alguien puede ayudar?

Gracias…

Puedes añadir id a tu botón. P.ej:-

 echo ""; echo ""; 

Y configure la clase css desde el lado del cliente después de configurar innerHTML en su AJAX. P.ej:-

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

NOTA: – Es una mala práctica obtener todo el código HTML del servidor a través de AJAX. Intente obtener solo los datos de su servidor a través de AJAX y construya su tabla HTML en el lado del cliente.

Ej. – código php

 if (mysqli_connect_errno()) { return; } $sql = "SELECT LoginName FROM table"; $res = mysqli_query($conn, $sql); $data = array(); if (mysqli_num_rows($res) > 0) { while($row = mysqli_fetch_assoc($res)) { array_push($data, $row['User']); } } mysqli_close($conn); echo json_encode($data); 

código jQuery

 $(document).ready(function(){ $.ajax({ method: "POST", url: "UserData.php", success: function(data){ var userData = JSON.parse(data); //contruct HTML table using jquery here } }); 

solo si alguien esta interesado Reestructuré mi CSS y tengo referencias explícitas. En lugar de dirigirse solo a la clase, también agregué el tipo de botón. El nuevo css se ve así:

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

Eso me permite abordar los artículos correctamente. Gracias a todas sus respuestas y a Eric, quien eliminó su respuesta, pero me trajo al camino correcto.

Saludos