JS для расширения строки DataTables запускается кнопками внутри строки

Question

Я использую 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. Когда пользователь нажимает на строку таблицы (#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');
       }
   });
   

3. expand_substance() отправляет запрос ajax на /expand-substance и передает идентификатор строки, по которому щелкнул пользователь. Эта конечная точка ajax возвращает HTML с дополнительной информацией о веществе, которое затем вводится в расширенную строку #substancesTable, по которой пользователь нажимает в (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;
    }
   

Проблема, с которой я столкнулся, заключается в том, что часть HTML-кода, возвращаемого (3), содержит якоря, например <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() и выдаст ошибку на том основании, что expand_substance() не было передано *1043*.

Я думал, что смогу использовать функциональность .not() в jquery, чтобы исключить мой класс .foo, например ,.

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

Но это не работает.

Я понимаю, что источник проблемы, вероятно, заключается в том, что я нацеливаюсь на щелчок на любом <td> в моей таблице с js в точке (2). Но это, кажется, дается в примерах DataTables при расширении строки и обновлении ее с помощью исходных данных ajax. В примерах не учитывается, что пользователь может захотеть щелкнуть что-либо (например, кнопку или привязку) внутри <td> после того, как ajax вернул содержимое.

Кто-нибудь может мне помочь? По существу, Я пытаюсь добавить click прослушивателей событий к якорям в HTML, возвращаемом (3), таким образом, чтобы они не были направлены на событие click (2).

Answer 1

Попробуйте добавить следующее в обработчик для .foo

event.stopPropagation();