Datatables with nav-tabs broken onClick

jwest

I am using datatables and nav-tabs in a form. I am having a weird problem.

If the form size has size greater than 992 pixels, when click in a row of the table, the click works and

the row is selected. Otherwise, the datatables row is not selected.

Here is a fiddle with the problem. https://jsfiddle.net/ontxswgr/1/

//JS
var tableTest;
    $(document).ready(function () {
      tableTest = $('#example').DataTable();
    });
    $('#example').on('click', 'tr', function () {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      } else {
        tableTest.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
      }
    });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You've got a ul.nav.nav-tabs element over the table which is capturing the click events. To confirm and see this yourself, right click and select "Inspect" when the output is small enough to see this issue.

Allan