JQuery（this）.data（“id”）返回未定义的输出[重复]

Question

我有两个文件，load-request.php 和 load-data.php，当我单击删除按钮获取其值时，load-request.php 中的删除按钮返回一个未定义的值。 请告知，为什么我没有得到价值。

加载请求.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>

加载数据.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

自从我不使用 jQuery 以来已经有一段时间了，但我可以告诉你，如果在您注册事件的那一刻，一个元素没有附加到 DOM，它就不会订阅它。所以也许在你渲染数据之后你可以注册事件，这样元素就会监听它。像这样的：

$("#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 默认为async。你可以在Jquery.ajax documentation中清楚地看到这一点

默认情况下，所有请求都是异步发送的（即设置为 默认为真）。如果您需要同步请求，请将此选项设置为 假的。

所以要解决您的问题，您需要

1. ：让它同步而不是异步：

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

        });
    })
});

1. 或者您可以收听文档对象

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

1. 如下使用自定义监听器

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