Почему у меня возникает проблема с событием onClick в JavaScript с возможностью регистрации данных?

Question

Итак, у меня есть datatable 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>