销毁并重新加载后无法扩展行；无法读取未定义的属性“_detailsShow”；答案

【问题标题】：Unable to expand rows after destroy and reload; Cannot read property '_detailsShow' of undefined;销毁并重新加载后无法扩展行；无法读取未定义的属性“_detailsShow”；
【发布时间】：2016-08-03 10:21:45
【问题描述】：

我正在使用 jQuery DataTable 创建网页。我有一个用例，页面打开时已经填充了表格。现在，页面中有一个表单，他可以在其中放置一些过滤器并刷新表格。此外，更重要的是，对于每一行，我可以展开以查看更多详细信息，如 explained here。

在我的例子中，一旦提交表单后重新加载数据，展开每个数据行的详细信息按钮就会停止工作。它给出了以下错误：

jquery.dataTables.min.js:120 Uncaught TypeError: Cannot read property '_detailsShow' of undefined

我正在通过首先清除、销毁然后调用 DataTable 方法来重新加载您的表。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../../static/css/chosen/bootstrap-chosen.css">

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../static/js/bootstrap/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">

        $(document).ready(
                function ()
                {
                    var dashboard_table_id = "#example";

                    function destroy_existing_data_table()
                    {
                        var existing_table = $(dashboard_table_id).dataTable();
                        if (existing_table != undefined)
                        {
                            existing_table.fnClearTable();
                            existing_table.fnDestroy();
                        }
                    }

                    function create_dashboard_table()
                    {
                        var data_table = $(dashboard_table_id).DataTable({
                            "data": [{
                                "dt_RowId": 10,
                                "column1": "delhivery",
                                "column2": "CRP12345",
                                "column3": "1122",
                                "column4": "One expanded row"
                            }, {
                                "dt_RowId": 2,
                                "column1": "delhivery",
                                "column2": "CRP12345",
                                "column3": "1122",
                                "column4": "Other expanded row"
                            }],
                            "columns": [
                                {"className": "select-checkbox", orderable: false, "data": null, "defaultContent": ""},
                                {"class": "details-control", "orderable": false, "data": null, "defaultContent": ""},
                                {"data": "column1"},
                                {"data": "column2"},
                                {"data": "column3"}
                            ],
                            "buttons": {},
                            "dom": 'lBfrtip',
                            "select": {
                                "style": 'multi',
                                "selector": 'td:first-child'
                            },
                            "oLanguage": {"sSearch": ""},
                            "order": [[2, 'asc']],
                            "bLengthChange": false,
                            "pageLength": 25
                        });

                        // adding event listener for opening and closing details
                        $(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',
                                function ()
                                {
                                    var tableRow = $(this).closest('tr');
                                    var row = data_table.row(tableRow);

                                    if (row.child.isShown())
                                    {
                                        tableRow.removeClass('details');
                                        row.child.hide();
                                    }
                                    else
                                    {
                                        var rowData = row.data();
                                        tableRow.addClass('details');
                                        row.child("Hello there, this is the expanded view I am referring to....").show();
                                    }
                                });
                    }

                    $("#example-form-submit").click(function (event)
                    {
                        event.preventDefault();
                        destroy_existing_data_table();
                        create_dashboard_table();
                    });

                    create_dashboard_table();
                });

    </script>
    <style>td.details-control {
        background: green;
        cursor: pointer;
    }

    tr.details td.details-control {
        background: blue;
    }</style>
</head>
<body>
<div class="main-content lfloat">
    <div class="container" style="width: 100%;">

        <label for="example-form-submit" class="col-md-2 control-label"></label>
        <div class="col-md-2">
            <button type="submit" id="example-form-submit" class="btn btn-primary">Refresh and try to expand</button>
        </div>

        <div>
            <table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>column1</th>
                    <th>column2</th>
                    <th>column3</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>

</html>

请有人指出我做错了什么。提前致谢。这已经困扰我一段时间了。

JSFiddle：致谢：@Edis Golubich

【问题讨论】：

@Edis Golubich：在那里也可以重现。请点击绿色按钮。您会看到该行扩展。现在单击顶部的按钮。然后再次单击绿色按钮。它不会扩大。
我的错。正在寻找错误的问题。
没问题。感谢任何帮助:)

标签： javascript jquery datatable

【解决方案1】：

它对我有用。只需在添加新的之前通过添加 .off 删除最新的点击事件处理程序。

$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control'); 
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){...});

【讨论】：

【解决方案2】：

以下代码对我有用

$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control');
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){
//Action To perform
});

【讨论】：

【解决方案3】：

问题是data_table 对象在通过委托事件处理使用 jQuery.on() 时没有得到“更新”。

试试这个：https://jsfiddle.net/f5mdcrup/4/

我所做的是在函数之外声明data_table。在这种情况下，范围会有所不同。

【讨论】：

即使在我点击提交按钮之前，我也无法在点击时展开行。
@OneMoreError 这是一个不同的问题。您在函数内部有 .on() ，并且随着函数 get 的调用，它也被多次调用。一次又一次地添加相同的事件处理程序:) 我已经更新了链接。 PS：它对我有用，因为我在通话之间有一个警报。在发布之前将其删除以用于静态，这就是为什么它不适合您。 PPS：我应该以前看过这个：P
@Edis : Plunker 很酷，但我面临另一个问题，当我点击“Referesh and Try to Expand button”时，我不想松开我的展开状态。你能帮忙吗，谢谢..