0

I've created a datatable with a collection button that will hide and show column groups. When one of the hide/show buttons is clicked I want to call an event listener. My eventlistener will not fire -- I have no idea what I'm doing wrong and have tried so many iterations to fix it that my head is in code fog right now. Can somebody spot what it is that I'm doing wrong?

var counter = 1;
var dtab = $('#tblCohort').DataTable({
  paging: false,
  dom: 'Brt',
  buttons: [{
      extend: 'collection',
      text: 'Section Visibility',
      buttons: []
    },
    'copy', 'excel', 'pdf'
  ]
});

dtab.button().add('0-0', {
  extend: 'colvisGroup',
  text: 'Hide Section 1',
  className: 'hidesec1',
  hide: '.sec1'
})

dtab.button().add('0-1', {
  extend: 'colvisGroup',
  text: 'Show Section 1',
  className: 'showsec1',
  show: '.sec1'
})

dtab.button().add('0-2', {
  extend: 'colvisGroup',
  text: 'Hide Section 2',
  className: 'hidesec2',
  hide: '.sec2'
})

dtab.button().add('0-3', {
  extend: 'colvisGroup',
  text: 'Show Section 2',
  className: 'showsec2',
  show: '.sec2'
})


$('.hidesec1').click(function() {
  alert('hide sec 1');
})

https://jsfiddle.net/pv2wo6u0/1/

Jimmy Genslinger
  • 557
  • 3
  • 21

1 Answers1

0

You can attach an event handler to the page's <body> element - since that is guaranteed to exist, whereas the child element (the drop-down item) will not initially exist.

The jQuery on() delegated event handler is therefore the right way to go - see Difference between .on('click') vs .click().

$('body').on('click', '.hidesec1', function() {
  alert('hide sec 1');
});

You don't have to use body - just a parent element which is guaranteed to exist when you create the handler.

Demo:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.25/af-2.3.7/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/b-print-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/sb-1.1.0/sp-1.3.0/sl-1.3.3/datatables.min.css" />


</head>

<body>

<div style="margin: 20px;">

<div class="table-responsive">
  <table id="tblCohort" class="table table-sm">
    <thead style="font-size: x-small">
      <tr>
        <td>Student ID</td>
        <td>Grade</td>
        <td>School</td>
        <td>Status</td>
        <td class="sec1">Section 1 Stuff</td>
        <td class="sec1">Section 1 Stuff Also</td>
        <td class="sec2">Section 2</td>
        <td class="sec2">Section 2 Other Stuff</td>
      </tr>
    </thead>
    <tbody style="font-size: smaller">
      <tr>
        <td>1</td>
        <td>10</td>
        <td>slitherin</td>
        <td>Fair</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>2</td>
        <td>11</td>
        <td>Griffindork</td>
        <td>Middlin</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>3</td>
        <td>10</td>
        <td>Hard Knocks</td>
        <td>Excellent</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>4</td>
        <td>9</td>
        <td>Zoolanders</td>
        <td>Okay</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>4</td>
        <td>9</td>
        <td>Zoolanders</td>
        <td>Okay</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>4</td>
        <td>9</td>
        <td>Zoolanders</td>
        <td>Okay</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>4</td>
        <td>9</td>
        <td>Zoolanders</td>
        <td>Okay</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
      <tr>
        <td>4</td>
        <td>9</td>
        <td>Zoolanders</td>
        <td>Okay</td>
        <td>stuff</td>
        <td>sec 2 stuff</td>
        <td>stuff for sec 3</td>
        <td>section 4</td>
      </tr>
    </tbody>
  </table>
</div>

</div>

<script>
 
$(document).ready(function() {

var counter = 1;
var dtab = $('#tblCohort').DataTable({
  paging: false,
  dom: 'Brt',
  buttons: [{
      extend: 'collection',
      text: 'Section Visibility',
      buttons: []
    },
    'copy', 'excel', 'pdf'
  ]
});

dtab.button().add('0-0', {
  extend: 'colvisGroup',
  text: 'Hide Section 1',
  className: 'hidesec1',
  hide: '.sec1'
})

dtab.button().add('0-1', {
  extend: 'colvisGroup',
  text: 'Show Section 1',
  className: 'showsec1',
  show: '.sec1'
})

dtab.button().add('0-2', {
  extend: 'colvisGroup',
  text: 'Hide Section 2',
  className: 'hidesec2',
  hide: '.sec2'
})

dtab.button().add('0-3', {
  extend: 'colvisGroup',
  text: 'Show Section 2',
  className: 'showsec2',
  show: '.sec2'
})


$('body').on('click', '.hidesec1', function() {
  alert('hide sec 1');
});

} );

</script>

</body>
</html>

A separate point: There is no $(document).ready(function() { ... } wrapping the DataTable logic - I would add that also. Or the newer but equivalent ready(), if preferred.

andrewJames
  • 19,570
  • 8
  • 19
  • 51