为什么我在 Datatable JavaScript 中遇到 onClick 事件问题？答案

【问题标题】：Why do I have an issue with onClick Event in Datatable JavaScript?为什么我在 Datatable JavaScript 中遇到 onClick 事件问题？
【发布时间】：2018-04-30 02:19:26
【问题描述】：

所以，我有一个数据表 js，它的脚本类似于

<script>
      var table;
      var init = 0;
      $(document).ready(function () {

          if (init == 0) {
              table = $('#example').DataTable({
                  columnDefs: [{
                      orderable: false,
                      className: 'select-checkbox',
                      targets: 0
                  }, {
                      "targets": [2],
                      "visible": false,
                      "searchable": false
                  }],
                  select: {
                      style: 'os',
                      selector: 'td:first-child'
                  },
                  order: [
                      [1, 'asc']
                  ]
              });
              init = 1;
          }
      })

      $('#btnSelectedRows').on('click', function () {
          alert('here');
              var tblData = table.rows('.selected').data();
              var tmpData;
              $.each(tblData, function (i, val) {
                  tmpData = tblData[i];
                  alert(tmpData);

              });
                document.location.href = "https://datatables.net/forums/discussion/42290/getting-the-checked-rows-in-datatables";
          })



  </script>

现在在这里，当我调用 onclick 事件时不会触发，而另一方面，如果我将它移动到 ready() 下，它将被调用。当我创建一个新的 html 时，我遇到了这个问题，但是它在 JS Fiddle (https://jsfiddle.net/mmushtaq/q67L1a9a/) 中完美运行

【问题讨论】：

while on other hand if I move it under ready() it will get invoked 尝试这样做，然后。听起来您正在尝试在 HTML 中解析该元素之前选择该元素。或者，更好的是，将您的脚本编写在一个单独的文件中，并为其标记提供defer 属性。
@CertainPerformance 如果我这样做，document.location.href 将不起作用。
wont work 是什么意思？当我将所有内容都包含在 ready 中时，似乎对我来说可以正常工作。
@CertainPerformance 它只是会重定向，我不知道是因为 datatable.js 还是其他问题，我在发布前两天累了。
分配给location.href 的全部意义在于重定向。如果您毕竟不想重定向，只需删除该行？请说明问题是什么

标签： javascript jquery .net datatable

【解决方案1】：

代码似乎没有什么问题：

1) 变量table 是全局定义的，但它的值是在$(document).ready 内部分配的，所以我相信外部对table 变量的引用可能不起作用。

2) 您在另一个函数中编写的 jquery 正在对页面呈现时不存在的 DOM 元素执行操作。所以你应该使用 jQuery 事件委托。为此：只需更改您的代码：

<script>
      var table;
      var init = 0;
      $(document).ready(function () {

          if (init == 0) {
              table = $('#example').DataTable({
                  columnDefs: [{
                      orderable: false,
                      className: 'select-checkbox',
                      targets: 0
                  }, {
                      "targets": [2],
                      "visible": false,
                      "searchable": false
                  }],
                  select: {
                      style: 'os',
                      selector: 'td:first-child'
                  },
                  order: [
                      [1, 'asc']
                  ]
              });
              init = 1;
          }

      $(document).on('click', '#btnSelectedRows', function () {
          alert('here');
              var tblData = table.rows('.selected').data();
              var tmpData;
              $.each(tblData, function (i, val) {
                  tmpData = tblData[i];
                  alert(tmpData);

              });
                document.location.href = "https://datatables.net/forums/discussion/42290/getting-the-checked-rows-in-datatables";
          });
      });

  </script>

【讨论】：

感谢@Himanshu Upadhyay 的解决方案，但相同的代码在我的另一台计算机上也能正常工作:) 但感谢分享