Question

所以，我有一个数据表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/）

中工作得很完美

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

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

1 个答案: