按钮单击不从数据表行触发

Question

我正在使用Datatables在表中显示数据，并且试图为每一行创建一个按钮，并使用columns.render捕获单击事件。

我使用JQuery创建了按钮，并尝试添加似乎无效的click事件

我知道还有其他方法可以执行此操作，但是为什么此方法不起作用？

 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> 

Answer 1

问题是因为render逻辑正在根据您提供的字符串构建新元素。 这意味着，尽管您将click处理程序附加到了元素，但是由于jQuery对象不用于附加新内容，因此它丢失了。

要解决此问题，您可以在button元素上使用委托的事件处理程序：

 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>