Событие выбора не запускается при нажатии на данные строки.

Question

В моей таблице определены обработчики выбора и удаления, которые отлично работают, когда пользователь щелкает пробел в строке. Однако, если пользователь нажимает на какой-либо текст (теги span, определенные в создании таблицы), событие никогда не запускается.

Чтобы исправить это, я попытался установить обработчик события щелчка строки, который проверяет, имеет ли строка свойство CSS «выбрано» или нет, а затем вручную запускает соответствующее событие de/selection по строке. Решение работает хорошо при нажатии на текст, но, к сожалению, не при нажатии на пустое место в строке, потому что оба события запущены, а поведение не ожидается.

Любая идея для этого?

/* 
*/ 
function createTable(){ 

    if(table != null){//Si la tabla ya existe: eliminamos filas y la destruimos. 
     table.destroy(); 
     $('#'+tableID).empty(); 
    } 

    table = $('#' + tableID).DataTable({ 
     "dom": 'Bfrtip', 
     "buttons": ['selectAll','selectNone'], 
     "columnDefs": [{ 
      "render": function(data, type, row){ 
       return '<span class="label bg-info">' + data + '</span>'; 
      }, 
      "targets": 1 
     }, 
     { 
      "render": function(data, type, row){ 
       return '<span class="column1">' + data + '</span>'; 
      }, 
      "targets": 0 
     }], 
     "select": {style: 'multi'}, 
     "data": rows, 
     "columns": columns, 
     "destroy": true 
    }); 

    table.off('select').on('select', handlerRowsSelection); 
    table.off('deselect').on('deselect', handlerRowsDeselection); 
    //table.off('click').on('click', 'tr', handlerRowClickEvent); 
} 

/* 
*/ 
function handlerRowClickEvent(){ 
    if ($(this).hasClass('selected')) { 
     table.row(this).deselect(); 
    } 
    else { 
     table.row(this).select(); 
    } 
} 

/* 
*/ 
function handlerRowsSelection(e, dt, type, indexes){ 
    if(type=="row"){ 
     //DOING SOMETHING 
    } 
} 

/* 
*/ 
function handlerRowsDeselection(e, dt, type, indexes){ 
    if(type=="row"){ 
     //DOING SOMETHING 
    } 
} 

Answer 1

Вот простой пример на codepen, не знаю, почему твоя не работает, как это кажется правильным. Попробуйте изменить код за один раз, чтобы получить то, что у вас есть, и это может помочь определить причину проблемы.

http://codepen.io/carltondickson/pen/VaQzyM

HTML

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr> 
     <td>Tiger Nixon</td> 
     <td>System Architect</td> 
     <td>Edinburgh</td> 
     <td>61</td> 
     <td>2011/04/25</td> 
     <td>$320,800</td> 
    </tr> 
    <tr> 
     <td>Garrett Winters</td> 
     <td>Accountant</td> 
     <td>Tokyo</td> 
     <td>63</td> 
     <td>2011/07/25</td> 
     <td>$170,750</td> 
    </tr> 
    </tbody> 
</table> 

CSS

https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css

JS

https://code.jquery.com/jquery-1.12.0.min.js

https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js

$(document).ready(function() { 
    var t = $('#example').DataTable({ 
     select: {style: 'multi'} 
    }); 
    t.off("select").on("select", function(e, dt, type, indexes) { 
     console.log("Selected"); 
     console.log(e, dt, type, indexes); 
    }); 
    t.off("deselect").on("deselect", function(e, dt, type, indexes) { 
     console.log("Deselected"); 
     console.log(e, dt, type, indexes); 
    }); 
});