通过ajax松散的onclick事件重新加载DIV

Question

我遇到了一个让我发疯的问题。我已经在网上寻找解决方案，但我发现的一切都对我不起作用，我不知道还有什么可以尝试的。

我在 PHP 中有一个页面，它从数据库中获取数据并动态地创建一个表。在每一行的末尾都有一个按钮或链接，用于删除相应的记录。

这是PHP的部分：

<div class="row mt-3">
<div class="col-12 col-xl-12">
    <div class="card border-card-tab" id="reload-table">
        <div class="card-header pb-0">
            <h5 class="card-title">Restaurants List</h5>
        </div>
        <div class="card-body pt-0">
            <table class="table table-striped table-hover" id="restaurants-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Id</th>
                        <th>Address</th>
                        <th>City Id</th>
                        <th class="text-end">Phone</th>
                        <th class="text-end">Email</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        // Code which obtain the table data from MySql database
                        //SELECT bla, bla,2 bla3 FROM blatable... etc.
                    ?>
                    <tr class="table-row-link">
                        <td class="Update"><i class="fas fa-circle text-success fa-fw"></i>Eat at Jhon's</td>
                        <td class="Update">123456789A</td>
                        <td class="Update">First Avenue</td>
                        <td class="Update">Heaven</td>
                        <td class="Update text-end">01233445567</td>
                        <td class="Update text-end">info@restaurantfake.com</td>
                        <td class="table-action text-end">
                            <a class="Delete" href="../Model/_restaurantsDBHelper.php?button-action=button-logicaldelete-restaurant&tab=1&inputIdRestaurant=1" data-id="1" rel="#reload-table" >Delete</a>
                        </td>
                    </tr>
                    <tr>
                        ...
                        ...
                        ... etc.
                    </tr>
                </tbody>                      
                <tfoot>
                </tfoot>
            </table>
        </div>
    </div>
</div>

通过 ajax 调用 PHP 页面来执行消除，一旦执行删除，返回一个字符串“ok”或“ko”指示结果，并在 ajax 成功时弹出带有消息的弹出窗口在没有删除行的情况下重新加载板时显示。

这是JS代码：

$(function () {
    $("a[class='Delete']").click(function (e) {
        var id = $(e.currentTarget).data('id');
        var urlDel = $(e.currentTarget).attr('href');
        var reload = $(e.currentTarget).attr('rel');
        $.ajax({
            type:'post',
            url: urlDel,
            data:'&dataid='+id,
            success:function(msg){   
                $(reload).load(location.href + " " + reload);             
                if ((typeof msg != "undefined") && (msg != null) && (msg == 'ok')){
                    showMessage("Deleted", "Data with id: "+id+"</strong> has been deleted.");
                } else {
                    showMessage("Error", "Data with id: <strong>"+id+"</strong> has not deleted.");
                }
            }
        });
        return false;
    });
});

问题是这样的：当我第一次访问页面时（我使用哪个浏览器都没有关系），一切正常，但是当我在重新加载后点击删除按钮时，“点击”事件不再被识别，而是 PHP 页面返回并显示结果（文本“ok”或“ko”）。 ajax 不再有效。

我已经读到这可能是由于在重新加载表格时代码不再“监听”“点击”事件，因此有必要以与此类似的方式修改函数：

$(function () {
    $("reload-table]").on("click", "a[class='Delete']", function (e) { ...etc. same code above});


$(function () {
    $("body").on("click", "a[class='Delete']", function (e) { ...etc. same code above});
    

$(function () {
    $(document).on("click", "a[class='Delete']", function (e) { ...etc. same code above});

基本上我已经尝试了问题解决方案中指出的所有解决方案：JQuery rebinding on vs bind after AJAX query，但似乎没有任何效果。 谁能看到我做错了什么？

Answer 1

我已经应用了您建议的解决方案以及我在网上找到的其他解决方案，但都没有奏效。

我认为问题在于我传递给 ajax 的元素。

无论如何，由于我想要实现的是“隐藏”用户删除的行，因此我意识到不必重新加载表，因为删除行就足够了，所以它看起来像这样：

[...]

success: function (msg) {
   // I changed this ----> $ (reload) .load (location.href + "" + reload);
   $ ('# rowid _' + id) .remove (); // <---- For this one

[...]

非常感谢大家的帮助！