行中的按钮正在触发扩展数据表行的JS

我在用 DataTables 1.10.16在使用Ajax源行数据的应用程序中。这意味着当用户单击表中的一行时,会发出一个Ajax请求来收集一些数据,然后填充该行。

一切都是通过Ajax完成的,所以在页面加载时表中没有数据。有一个简单的空 <table> 带身份证 #substancesTable .

设置方法如下:

1. 填充表的数据从 /get-substances.json 这样地:

   var substancesTable = $('#substancesTable').DataTable({
       "processing": true,
       "serverSide": true,
       "searching": false,
       "ajax": {
           "url": "/get-substances.json",
           "method": "POST",
           "cache": false,
           "dataSrc": function (json) {
               return json.data;
           }
    }
    // ...
   

2. 当用户单击表的一行时( #实质性的 )它使用if…else语句,以便关闭任何可见的行(折叠它们)。但是,如果一行当前已折叠,则单击它将执行 expand_substance() -见第(3)点。

   $('#substancesTable tbody').on('click', 'td', function () {
       var tr = $(this).closest('tr');
       var row = substancesTable.row( tr );
   
       if ( row.child.isShown() ) {
           row.child.hide();
           tr.removeClass('shown');
       } else {
           row.child( expand_substance(row.data()) ).show();
           tr.addClass('shown');
       }
   });
   

3. 展开_-substance() 向发出Ajax请求 /expand-substance 并传递用户单击的行ID。此Ajax端点返回HTML,其中包含该物质的进一步详细信息,然后将其填充到 #实质性的 用户点击(2)

   function expand_substance ( rowData ) {
       var div = $('<div/>').text('Loading...');
   
       $.ajax({
           url: '/expand-substance/' + rowData.id,
           dataType: 'html',
           success: function ( data ) {
               div.html(data);
           }
       });
   
       return div;
    }
   

我遇到的问题是(3)返回的一些HTML包含锚,例如 <a href="/some-action" class="foo">Some action</a> . 如果这些是常规锚——没有任何基于JS的事件监听器,那么它们正常工作。例如,单击上面的按钮确实会使用户 /some-action . 但是,如果我想 .foo 锚具有事件处理程序,例如:

$('#substancesTable').on('click', '.foo', function (e) {
    e.preventDefault();
    console.log('testing');
});

浏览器正在尝试执行 展开_-substance() 这不是我想要的。它不会达到 console.log() 并将错误的基础上,没有 rowData 已传递给 展开_-substance() .

我想我可以用jquery的 .not() 排除我的 福 从被瞄准,例如

// Modified from step (2)
$('#substancesTable tbody').not('.foo').on('click', 'td', function ()

但这不管用。

我知道问题的根源可能是我要点击任何 <td> 在我的表中,JS在点(2)中。但在数据表示例中,当扩展一行并使用Ajax源数据更新它时,似乎已经给出了这一点。示例没有考虑到用户可能希望单击 <TD & GT; 在Ajax返回内容之后。

有人能帮我吗?基本上 我想补充一下 click (3)返回的HTML中锚定的事件侦听器不会以(2)的单击事件为目标。