我正在使用 Datatables在表中显示数据,我尝试为每一行创建一个按钮并使用 columns.render
捕获点击事件。
我使用 JQuery 创建了按钮并尝试添加一个似乎不起作用的点击事件
我知道还有其他方法可以做到这一点,但为什么这个方法不起作用?
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
];
$('#example').DataTable({
data: dataSet,
responsive: true,
columns: [{
title: "Name"
},
{
title: "Position"
},
{
title: "Office"
},
{
title: "Extn."
},
{
title: "Start date"
},
{
title: "Salary"
},
{
"render": function(data, type, row, meta) {
var button = $('<button/>', {
html: "Click!"
});
button.click(function() {
alert("Click event working");
});
return button[0].outerHTML;
}
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" width="100%"></table>
最佳答案
问题是因为 render
逻辑正在根据您提供的字符串构建新元素。这意味着,虽然您将 click
处理程序附加到该元素,但它会丢失,因为 jQuery 对象未用于附加新内容。
要解决此问题,您可以在 button
元素上使用委托(delegate)事件处理程序:
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"]
];
$('#example').DataTable({
data: dataSet,
responsive: true,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" },
{
"render": function(data, type, row, meta) {
return '<button data-name="' + row[0] + '">Click!</button>';
}
}
]
});
$('#example').on('click', 'button', function() {
console.log($(this).data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" width="100%"></table>
关于javascript - 按钮单击不从数据表行触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49998675/