javascript - 避免在元素上绑定(bind)多个事件

Question

我正在通过 ajax 在我的 .net 元素中获取 cshtml，在成功地将数据投标到 dom 之后，使用导出到 excel 功能初始化其上的数据表，

但是当您多次获取数据时(用户使用文件管理器)，数据表每次都会将事件绑定(bind)(附加)到导出按钮，并且用户最终一次下载多个 excel 文件。

我已经用 data 和 getCSHTML 方法复制了 cshtml 和 ajax 方法。

重现问题的步骤。

1. 点击获取数据按钮。
2. 点击导出数据按钮(只会下载一个文件)。
3. 返回第 1 步和第 2 步，在不刷新浏览器选项卡的情况下重复执行，您将最终一次单击下载多个 excel 文件。

我已经尝试过，.off()、.unbind() 和 .bind()，但没有帮助。

var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'

function getCSHTML() {
  $("#masterPage").html(data);

  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "initComplete": function() {
      var $buttons = $('.dt-buttons').hide();
      if ($('#exportLink').length > 0) {
        $('#exportLink').on('change', function() {
          var btnClass = $(this).find(":selected")[0].id ?
            '.buttons-' + $(this).find(":selected")[0].id :
            null;
          if (btnClass) $buttons.find(btnClass).click();
        })
      }
      $('#exportToExcel').on('click', function() {
        $('.buttons-excel').click()
      })
    },
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>

<div id="masterPage"></div>

Answer 1

您需要unbind在你的功能开始时用这一行

$("#exportToExcel").unbind("click")

示例:

var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'

function getCSHTML() {
  $("#masterPage").html(data);

  $("#exportToExcel").unbind("click"); // unbind here

  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "initComplete": function() {
      var $buttons = $('.dt-buttons').hide();
      if ($('#exportLink').length > 0) {
        $('#exportLink').on('change', function(e) {
          var btnClass = $(this).find(":selected")[0].id ?
            '.buttons-' + $(this).find(":selected")[0].id :
            null;
          if (btnClass) $buttons.find(btnClass).click();
        })
      }
      $('#exportToExcel').on('click', function(e) {
        $('.buttons-excel').click()
      })
    },
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>

<div id="masterPage"></div>