我正在通过 ajax 加载表数据,其中包括编辑和删除按钮,现在当我尝试通过事件绑定访问特定按钮时它不起作用
这是html部分
<div class="widget-body no-padding">
<sa-datatable [options]="tableData" paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone"> ID </th>
<th data-class="expand"> Name </th>
<th data-hide="phone,tablet"> Email </th>
<th data-hide="phone,tablet"> Role </th>
<th data-hide="phone,tablet"> join Date </th>
<th data-hide="phone,tablet"> Action </th>
</tr>
</thead>
</sa-datatable>
并在组件中通过ajax加载数据
tableData = {
ajax: (data, callback, settings) => {
this.usersService.getUsers(0).subscribe(data => {
if(data.success){
callback({
aaData: data.data
});
} else {
alert(data.msg);
}
},
error => {
alert('Internal server error..check database connection.');
});
},
columns: [
{
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{
data: function (name) { return name.firstname+ ' ' + name.lastname; }
},
{data: 'email'},
{data: 'user_role'},
{data: 'created_at'},
{
render: function (data, type, row) {
return `<ul class="demo-btns">\
<li> <span (click)="edit()" class="btn btn-primary btn-xs"><i class="fa fa-gear"></i> Edit</span></li>\
<li> <span class="btn btn-danger btn-xs"><i class="fa fa-gear"></i> Delete</span></li>\
</ul>`;
}
}
],
buttons: [
'copy', 'pdf', 'print'
]};
edit(){
console.log('Clicked..');}
当我通过 ajax 加载数据时,看起来好像没有创建 dom 元素,这就是它没有发出任何事件的原因。谁能让我知道如何以任何其他方式在单击按钮时收听事件。