Jquery 附加html元素的事件侦听器不工作

附加html元素的事件侦听器不工作。此按钮的作用是打开一个弹出窗口，提示用户进行删除确认

我用这种方式来处理视图页面，而不是用普通的html和jsp代码方式，因为我想使用ajax和jquery进行分页。当时事件侦听器工作正常。我省略了代码，因为它不太相关

我做错了什么

viewAnnouncements.jsp

<table>
<thead>
    <!--Sets the table headings-->
</thead>
<script type="text/javascript">
    $('document').ready(function() {
        $.get("processPagination.jsp?requestType=getRecords, function(data) {
            var JSONData = JSON.parse(data);
            for(i=0; i<recordsToFetch; i++){
            const record = JSONData.results[i].split(",");
            const title = record[0];
            $("tbody").append("
            <tr>
                <td><a>"+title+"</a></td>
                <td>
                    <p data-placement='top' data-toggle='tooltip' title='Delete'>
                    <button class='btn btn-danger btn-xs announcement-delete-button' data-title='Delete' data-id='"+index+"'>
                    <i class='far fa-trash-alt' ></i></button></p>
                </td>
            </tr>");
            }
    });
</script>
<tbody>
    <!--Rows are appended here-->
</tbody>

---

编辑：我已经尝试将事件侦听器绑定到tbody并调用子选择器“announcement delete button”，但仍然不起作用。

您需要将事件侦听器绑定到body而不是直接类

$('body').on('click', '.announcement-delete-button', function (e) { /*Your code here*/ });

---

在这种情况下，您只需限制字符串，并在追加时将它们添加到一起

$("tbody").append("" +
        "<tr>" +
        "    <td><a>"+title+"</a></td>" +
        "    <td>" +
        "       <p data-placement='top' data-toggle='tooltip' title='Delete'>" +
        "        <button class='btn btn-danger btn-xs announcement-delete-button' data-title='Delete' data-toggle='modal' data-target='#delete' data-id='"+index+"'>" +
        "        <i class='far fa-trash-alt' ></i></button></p>" +
        "    </td>" +
        "</tr>");

$（“tbody”）.append（“'+
"" +
“”+标题+“”+
"    " +
“
”+
"        " +
“
”+
"    " +
"");

所谓主体，你指的是t主体？所谓主体，我指的是文档主体，请参见回答中的代码家长必须是直接家长吗？我不明白你在这里想说什么。什么家长？哇，我做到了，我可能一直绑定到一个错误的html家长。非常感谢！追加部分并不是引起我麻烦的部分，我能够查看表中包含所有数据的行，没有问题。问题在于连接到announcement delete button类的事件侦听器——好的，在本例中是idk

$("tbody").append("" +
        "<tr>" +
        "    <td><a>"+title+"</a></td>" +
        "    <td>" +
        "       <p data-placement='top' data-toggle='tooltip' title='Delete'>" +
        "        <button class='btn btn-danger btn-xs announcement-delete-button' data-title='Delete' data-toggle='modal' data-target='#delete' data-id='"+index+"'>" +
        "        <i class='far fa-trash-alt' ></i></button></p>" +
        "    </td>" +
        "</tr>");