数据表完成渲染后触发事件

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 中的元素触发点击事件。

• 更改附加点击处理程序的方式。

  $('#mydatatable').on('click', 'button', function () {
      OnCategoryClick(this); 
  });
  

  请记住始终对 jQuery DataTables 中的元素使用委托事件处理程序，因为除 first 之外的页面元素在 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 选项定义回调并在此处执行。