Question

我在使用基于ajax的行数据的应用程序中使用DataTables 1.10.16。这意味着当用户单击表的一行时，会发出ajax请求以收集一些数据，然后填充该行。

所有操作都是通过ajax完成的，因此在页面加载时表中没有数据。简单的是一个空<table>，其ID为#substancesTable。

设置方法如下：

用于填充表格的数据是从/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;
        }
 }
 // ...

当用户单击表的一行（#substancesTable）时，它使用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');
    }
});

expand_substance()向/expand-substance发出ajax请求，并传递用户单击的行ID。此ajax端点返回HTML，其中包含该物质的更多详细信息，然后将其填充到用户在（2）中单击的#substancesTable的扩展行中

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');
});

浏览器正在尝试执行expand_substance()，这不是我想要的。它不会到达console.log()的最远处，并且会因未将rowData传递给expand_substance()而出错。

我认为我可以使用jquery的.not()功能将我的.foo类排除在目标之外，例如

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

但这不起作用。

我了解问题的根源很可能是我的目标是单击表中第（2）步中的js，以单击表中的任何<td>。但这似乎在DataTables示例中给出，当扩展一行并使用ajax源数据对其进行更新时。这些示例未考虑到ajax返回内容后，用户可能希望单击<td>内的内容（例如按钮或锚点）。

有人可以帮助我吗？本质上，我试图将click事件侦听器添加到（3）返回的HTML锚中，以使其不会被（2）的click事件作为目标。

Answer 1

尝试将以下内容添加到.foo的处理程序中

event.stopPropagation();

js扩展DataTables行是由行内的按钮触发的

1 个答案: