JQuery (this).data("id") returns undefined output

Question

I have two files, load-request.php, and load-data.php, the delete button in load-request.php returns an undefined value when I click on the delete button to get its value. kindly advise, why I am not getting the value.

Load-request.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>

load-data.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);
?>

Answer 1

It's been a while since I don't use jQuery but I can tell that if an element is not attached to the DOM at the moment that you register the event, it won't subscribe to it. So maybe after you render the data you can register the event, this way the elements will listen to it. Something like this:

$("#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);

          });
        }
    });
});

Answer 2

Jquery.ajax is async by default. You can see this clearly in the Jquery.ajax documentation

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

so to solve your issue you need to

1. : make it sync instead of async :

$(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);

        });
    })
});

2. or you can listen to the document object

$(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);
});

3. use a custom listener as following

$(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"));
            }
        });
    })
});