JQuery 数据表。 AJAX 加载后无法让 JQuery 函数工作答案

【问题标题】：JQuery Datatables. Can't get JQuery function to work after AJAX loadJQuery 数据表。 AJAX 加载后无法让 JQuery 函数工作
【发布时间】：2023-03-29 20:15:01
【问题描述】：

这里是问题的截屏视频，以便更清楚......

http://screencast.com/t/KXD8U1oA0yU6

这是我第一个尝试了解 AJAX 的项目，因此遇到了一些绊脚石。

我有一个数据表，它通过 AJAX 从 JSON 输出加载用户详细信息。

有一个“停用”按钮可以停用用户帐户。

我已将 popconfirm id 应用于每一行...

            <script type="text/javascript">
                $(document).ready(function() {
                    $('#user_list').DataTable( {
                        stateSave: true,
                        "pageLength": 20,
                        "ajax": {
                            "url": "data/JSON_users_list.php",
                            "dataSrc": "",
                        },

                        "columns": [
                            { "data": "profile_photo_path" },
                            { "data": "namebulk" },
                            { "data": "email" },
                            { "data": "active" },
                            { "data": "id"}
                        ],
                        "columnDefs": [
                            { sClass: "hidden-xs hidden-sm", "targets": [ 0 ] },
                            { sClass: "user-name", "targets": [ 1 ] },
                            { sClass: "hidden-xs hidden-sm", "targets": [ 2 ] },
                            { sClass: "action-links", "targets": [ 3 ] },
                            { "width": "1%", "targets": 0 },
                            {
                            "targets": [ 4 ],
                            "visible": false,
                            "searchable": false
                        }
                        ],
                        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                              $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>');
                              $('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>');

                              $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>');

                              return nRow;
                        },
                    } );

                    var myTable = $('#user_list').DataTable();

                    yadcf.init(myTable, [
                        {column_number : 0, filter_type: 'none'},
                        {column_number : 1, filter_type: 'text'},
                        {column_number : 2, filter_type: 'text'}
                    ]);


                } );
            </script>

这是应该初始化 popconfirm 的特定行

 <a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>

popconfirm JS 在这里找到：https://github.com/Ifnot/PopConfirm

下面是对 ID 为“deactivate”的任何东西初始化 popconfirm 的代码：

    <script type="text/javascript">
        $(document).ready(function() {

            // Custom Title, Content and Placement
            $("#deactivate").popConfirm({
                title: "Are you sure?",
                content: "All previous records of this user will be maintained on the system for consistency",
                placement: "left",
                noBtn: "Cancel"
            });
        });
    </script>

我已尝试将其更改为：

$('#main-content').ready(function() {

和

$('body').ready(function() {

确保它被初始化为出现在正文或主要内容 DIV 中的任何内容，但仍然没有运气......

我在这里遗漏了一些简单的东西，还是 popconfirm 本身不会像这样工作？

谢谢

【问题讨论】：

标签： javascript jquery json ajax datatable

【解决方案1】：

您是否在页面中的脚本标记中添加了此文件：jquery.popconfirm.js？（请参阅https://github.com/Ifnot/PopConfirm 上的自述文件）

【讨论】：

是的，确实，我已经浏览了 chrome 的控制台并且可以看到它——它在不包含在 AJAX 调用中时也可以工作

【解决方案2】：

我认为脚本本身在这方面存在固有缺陷，我尝试了另一个http://flwebsites.biz/jConfirm/，并且完美无缺

【讨论】：

【解决方案3】：

我知道这是一个老问题，但我将把它留在这里，以供将来遇到此问题的任何人使用。

Popconfirm 在这种情况下不起作用，因为 DataTables 是异步的，所以在调用 $(document).ready() 时不一定会完成。

您需要使用的是initComplete 回调，它会在数据完全加载时调用。

这里是文档：https://datatables.net/reference/option/initComplete

在这种情况下，您必须执行以下操作：

$('#user_list').DataTable({

  // Your initialization code

  "initComplete": function(settings, json) {
    $("#deactivate").popConfirm({
        title: "Are you sure?",
        content: "All previous records of this user will be maintained on the system for consistency",
        placement: "left",
        noBtn: "Cancel"
    });
  }
});

【讨论】：