Tengo dos archivos, load-request.php y load-data.php, el botón eliminar en load-request.php devuelve un valor indefinido cuando hago clic en el botón eliminar para obtener su valor. amablemente avise, por qué no estoy obteniendo el valor.
Solicitud de carga.php
<form> <table class="table" id="main" border="0" cellspacing="0"> <tr> <td id="table-load"> <input type="button" id="load-button" value="Load Data"> </td> </tr> <table class="table" width="55%"> <tr> <td id="table-data"></td> </tr> </table> </td> </tr> </table> <script> $(document).ready(function() { //ajax to load the table $("#load-button").on("click", function() { $.ajax({ url: "load-data.php", type: "POST", dataType: "text", success: function(data) { $("#table-data").html(data); } }); }); $(document).on("click", ".delete-btn", function() { console.log($(this).find("data-id")); var pn = $(this).attr('value'); alert(pn); }); }); </script> </form> </body> </html>cargar-datos.php
<?php while ($row = mysqli_fetch_assoc($result)) { $output .= "<tr><td>{$row["pname"]}</td><td>{$row["src"]}</td><td>{$row["dst"]}</td><td>{$row["ports"]}</td><td>{$row["inzone"]}</td><td>{$row["outzone"]}<td><button Class='delete-btn' **data-id'{$row["pname"]}**'>Delete</button></td></tr>"; } $output .= "</table>"; echo $output; mysqli_close($conn); ?>Ha pasado un tiempo desde que no uso jQuery, pero puedo decir que si un elemento no está adjunto al DOM en el momento en que registra el evento, no se suscribirá. Entonces, tal vez después de representar los datos, puede registrar el evento, de esta manera los elementos lo escucharán. Algo como esto:
$("#load-button").on("click", function() { $.ajax({ url: "load-data.php", type: "POST", dataType: "text", success: function(data) { $("#table-data").html(data); $(document).on("click", ".delete-btn", function() { console.log($(this).find("data-id")); var pn = $(this).attr('value'); alert(pn); }); } }); });Jquery.ajax esasíncrono por defecto. Puede ver esto claramente en la documentación de Jquery.ajax
De forma predeterminada, todas las solicitudes se envían de forma asíncrona (es decir, esto se establece en verdadero de forma predeterminada). Si necesita solicitudes síncronas, establezca esta opción en falso.
así que para resolver tu problema necesitas
$(document).ready(function() { //ajax to load the table $("#load-button").on("click", function() { $.ajax({ url: "data.php", type: "POST", dataType: "text", success: function(data) { $("#table-data").html(data); }, async: false }); $(document).on("click", ".delete-btn", function() { console.log($(this)); var pn = $(this).attr('data-id'); alert(pn); }); }) }); $(document).ready(function() { //ajax to load the table $("#load-button").on("click", function() { $.ajax({ url: "data.php", type: "POST", dataType: "text", success: function(data) { $("#table-data").html(data); } }); }) }).on("click", ".delete-btn", function() { console.log($(this)); var pn = $(this).attr('data-id'); alert(pn); }); $(document).ready(function() { //ajax to load the table function myCustomListener(that) { that.on("click", ".delete-btn", function() { console.log($(this)); var pn = $(this).attr('data-id'); alert(pn); }); } $("#load-button").on("click", function() { $.ajax({ url: "data.php", type: "POST", dataType: "text", success: function(data) { $("#table-data").html(data); myCustomListener($("#table-data")); } }); }) });