Question

我正在使用数据表并从ajax URL中获取数据。我返回的表数据的每一行都包含一个字段，该字段呈现如下所示的按钮：

<button type="button" data-catid="8" data-catname="Programming:JavaScript"></button>

指定data-catid和data-catname的值来自数据表检索数据。

在某些情况下，当表格完成加载时，我想触发其中一个按钮的单击。我的代码就是：

$('#mydatatable').find('button[data-catid="9"]').trigger('click');

但是，我无法找到一种方法来执行此操作，以便在表格呈现并且按钮存在于dom中之后发生，因此我可以找到它并触发点击。

我已经尝试过drawCallback和initComplete，但是当按钮实际添加到dom后，这些都没有被触发，允许我用jquery找到它。

有没有办法可以做到这一点？即，在mytable通过ajax完成检索数据并触发后，触发我的点击？

我正在使用数据表v 1.10

编辑：以下是我的点击事件处理程序如何附加到摘要表。

var selectedCat = 0;
$('#mydatatable :button').click(function () {
    selectedCat = this.getAttribute("data-catId");
    console.log("selecteCat is " + selectedCat);
    qDetailTable.ajax.url('/datatables/question-data/' + selectedCat).load();
    var selectedCatName = this.getAttribute("data-catName");
    $('#questDetailCat').text('Questions about: ' + selectedCatName);
    $('#questSummary').hide();
    $('#questDetail').show();
});

Answer 1

将点击处理程序移动到单独的函数中，例如：

var selectedCat = 0;
function OnCategoryClick(btn){
    selectedCat = btn.getAttribute("data-catId");
    console.log("selecteCat is " + selectedCat);
    qDetailTable.ajax.url('/datatables/question-data/' + selectedCat).load();
    var selectedCatName = btn.getAttribute("data-catName");
    $('#questDetailCat').text('Questions about: ' + selectedCatName);
    $('#questSummary').hide();
    $('#questDetail').show();
});

事件处理程序需要位于命名函数中，因为您将无法像jQuery DataTables那样触发不在DOM中的元素的click事件。

更改单击处理程序的附加方式。
```
$('#mydatatable').on('click', 'button', function () {
    OnCategoryClick(this); 
});
```
请记住始终使用委托事件处理程序和jQuery DataTables中的元素，因为除了第一个以外的页面的元素在DOM中不可用。有关详细信息，请参阅jQuery DataTables – Why click event handler does not work。
使用$() API方法找到所需的按钮并调用处理程序函数OnCategoryClick()。
```
var btn = $('#datatable-summary').DataTable().$('button[data-catid="9"]').get(0);         
OnCategoryClick(btn);
```
将datatable-summary替换为汇总表的实际ID。

如果您需要在初始化和绘制摘要表后立即更新详细信息，请使用initComplete选项定义回调并在那里执行。

数据表表完成渲染后的Fire事件

1 个答案: