Javascript 数据表中的按钮

我是JS新手，我正在尝试做一些简单的事情，但我做不到

我创建了一个datatable，最后一列有按钮，但当我点击它们时，什么也没发生

单击按钮后，我的Datatable将充电。（btn搜索）

多谢各位

$（文档）.ready（函数（）{
$（“#btn搜索”）。在（'click'，function（）上{
$.ajax({
键入：“获取”，
url:“{myurlapi}}”，
}).完成（功能（结果）{
变量表=$（“#示例”）。数据表（{
“数据”：result.data，
“栏目”：[
{“数据”：“id”}，
{“数据”：“名称”}，
{“数据”：null}
],
“columnDefs”：[
{“可搜索”：false，
“可订购”：错误，
“目标”：0
},
{宽度：“3%”，
目标：0
},
{目标：-1，
数据：空，
默认内容：“”
},
],
“处理”：对，
“检索”：正确，
“搜索”：错误
} );
table.clear（）.draw（）；
table.rows.add（result.draw（）；
});
});
$（#示例tbody'）。在（'click'，'btn view'，函数（e）上{
警惕（‘某物’）
} );
});

搜寻
您调用on.click事件的时间太快。如果在dom加载时启动它，它将只对dom中已经存在的按钮起作用。以后添加的任何内容（附加、替换任何内容）都不会触发on.click事件

试试这个->

$(document).ready(function() {
    $('#btn-search').on('click', function() {

        $.ajax({
            type: "GET",
            url: "{{myurlapi }}",
        }).done(function(result) {
            var table = $('#example').DataTable({
                "data": result.data,
                "columns": [{
                        "data": "id"
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": null
                    }
                ],
                "columnDefs": [{
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                    {
                        width: '3%',
                        targets: 0
                    },
                    {
                        targets: -1,
                        data: null,
                        defaultContent: '<div class="btn-group"> <button type="button" class=" btn btn-view"><span> <i class="icon-plus"></i></span> </button></div>'
                    },
                ],
                "processing": true,
                "retrieve": true,
                "searching": false
            });
            table.clear().draw();
            table.rows.add(result).draw();
        });
    });
    $(document).ajaxComplete(function() {
        $('#example tbody').on('click', '.btn-view', function(e) {
            alert('something')
        });
    });
});

$（文档）.ready（函数（）{
$（“#btn搜索”）。在（'click'，function（）上{
$.ajax({
键入：“获取”，
url:“{myurlapi}}”，
}).完成（功能（结果）{
变量表=$（'#示例'）。数据表({
“数据”：result.data，
“栏目”：[{
“数据”：“id”
},
{
“数据”：“名称”
},
{
“数据”：空
}
],
“columnDefs”：[{
“可搜索”：错误，
“可订购”：错误，
“目标”：0
},
{
宽度：“3%”，
目标：0
},
{
目标：-1，
数据：空，
默认内容：“”
},
],
“处理”：对，
“检索”：正确，
“搜索”：错误
});
table.clear（）.draw（）；
table.rows.add（result.draw（）；
});
});
$（文档）.ajaxComplete（函数（）{
$（#示例tbody'）。在（'click'，'btn view'，函数（e）上{
警惕（‘某物’）
});
});
});
我认为您缺少的是，当页面加载时，单击事件绑定到表中不存在的元素。加载数据时，将加载包含按钮的列，但仍缺少这些列上的单击事件

请说明如何在表的完整负载上添加事件

在javascript中，当您放置选择器时，它只能应用于加载的元素，除非您将其放置在“监视dom的代码”中。在您的例子中，您不需要一直监视DOM，因为一旦按钮加载到DOM中，就可以在您的控制下运行代码

如果您使用initComplete函数中提到的上述技术，您将能够调试它。我没有在这里复制示例，因为它们已经在该链接中提到过，但是有许多方法可以检查表中加载的数据，我建议使用库提供的方法，以便将来您可以无任何问题地更新数据表和其他库。
您是否正确地将单击事件绑定到
.btn view
？是否尝试过加载表后是否在控制台中重新添加“on.click”事件？该表是否加载了一段时间（即大表）？我将其放在btn搜索功能之后，但它不起作用。我可以看到您将其放在btn搜索之后，但根据您的代码，它看起来像是在dom加载时触发的，不会将单击事件添加到以后添加的任何内容中。加载表后（手动）在控制台中复制粘贴代码，并查看是否发生任何事情。AjaxComplete将在页面上的任何ajax请求完成后运行。除非您只有一个请求来获取该表数据，否则这可能并不理想，因为在完成任何ajax请求后，您将在按钮上进行事件绑定，而这些按钮可能已经有另一个事件绑定到它们。^这一点很好。我假设他在页面上只有一个ajax调用（使用datatables时最常见的场景）。如果不是这样的话，承诺可能会有所帮助（因为我正在尝试解决上述问题，所以从未使用过承诺）->每次单击搜索按钮时，我只有一个ajax调用。每次单击内联按钮，我都会打开一个包含id信息的新页面，我会尝试：var data=table.row（$（this.parents（'tr'））.data（），但它不起作用。我怎样才能把桌子递给这里？很抱歉，正如我所说，我对这一点还不熟悉。当您调用外部页面打开时，您需要通过post或get方法传递变量，如数据。例如，在新窗口中为第17行打开的url可以是//whater.com/id/或//whater.com/？objectid=id。