尝试使用 jquery click 事件并且它没有触发答案

【问题标题】：Trying to use jquery click event and it's not firing尝试使用 jquery click 事件并且它没有触发
【发布时间】：2021-06-24 20:47:13
【问题描述】：

我创建了一个带有收藏按钮的数据表，该按钮将隐藏和显示列组。单击其中一个隐藏/显示按钮时，我想调用事件侦听器。我的事件监听器不会触发——我不知道我做错了什么，并且尝试了很多次迭代来修复它，以至于我的头现在处于代码迷雾中。有人能看出我做错了什么吗？

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/

【问题讨论】：

标签： jquery datatables click

【解决方案1】：

您可以将事件处理程序附加到页面的 <body> 元素 - 因为它保证存在，而子元素（下拉项）最初不会存在。

因此，jQuery on() 委托事件处理程序是正确的方法 - 请参阅 Difference between .on('click') vs .click()。

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

您不必使用body - 只是一个在您创建处理程序时保证存在的父元素。

演示：

<!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>

另外一点：没有 $(document).ready(function() { ... } 包装 DataTable 逻辑 - 我也会添加它。或者更新但等效的ready()，如果愿意的话。

【讨论】：

感谢您将我的所有逻辑包装在 $(document).ready() 中的回答和建议！！