尝试使用 jquery 单击事件但未触发

Question

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

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/

Answer 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()，如果愿意的话。

尝试使用 jquery 单击事件但未触发

Trying to use jquery click event and it's not firing

jquery

click

datatables