Uncaught SyntaxError: Неожиданный конец ввода в AJAX

Question

Я пытаюсь переместить отмеченные флажки из одного контрольного списка, который на самом деле находится в таблице, в другой контрольный список в другой таблице, так что оба синхронизируются c. Однако этот код дает мне синтаксическую ошибку «Неожиданный конец ввода» в Chrome и не будет работать:

var checkedBoxes = document.querySelectorAll('.contentChecks');
var chkArray = [];
chkArray = $.map(checkedBoxes, function(el) {
  if(el.checked) { return el.id.substring(1, el.id.length) }
});

for (var i = 0; i < chkArray.length; i++)
{
  var checkbox = document.getElementById("B" + chkArray[i]);
  checkbox.checked = true;
  var row = $("#B" + chkArray[i]).closest('tr'); // row with changed checkbox
  row.insertBefore(row.parent().find('tr:first-child')); // move to top
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Checkboxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
         <input type="checkbox" id="A127" class="contentChecks" checked />
         <label for="A127" class="todo">
           &nbsp;<i class="fa fa-check"></i>Sample Text 1
         </label>
      </td>
    </tr>
    <tr>
      <td>
         <input type="checkbox" id="A32" class="contentChecks" checked />
         <label for="A32" class="todo">
           &nbsp;<i class="fa fa-check"></i>Sample Text 2
         </label>
      </td>
    </tr>
    <tr>
      <td>
         <input type="checkbox" id="A1543" class="contentChecks" checked />
         <label for="A1543" class="todo">
           &nbsp;<i class="fa fa-check"></i>Sample Text 3
         </label>
      </td>
    </tr>
   </tbody>
 </table>
 
 <table id="table2">
  <thead>
    <tr>
      <th>Checkboxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
         <input type="checkbox" id="B127" class="contentChecks2" />
         <label for="B127" class="todo">
           &nbsp;<i class="fa fa-check"></i>Sample Text 1
         </label>
      </td>
    </tr>
    <tr>
      <td>
         <input type="checkbox" id="B32" class="contentChecks2" />
         <label for="B32" class="todo">
           &nbsp;<i class="fa fa-check"></i>Sample Text 2
         </label>
      </td>
    </tr>
    <tr>
      <td>
         <input type="checkbox" id="B1543" class="contentChecks2" />
         <label for="B1543" class="todo">
           &nbsp;<i class="fa fa-check"></i>Sample Text 3
         </label>
      </td>
    </tr>
   </tbody>
 </table>

Я попытался отладить этот миллион способов, но безрезультатно, за исключением того, что я сделал вывод, что с l oop что-то не так с момента комментирования другой код все еще дал ошибку. Я поместил этот код в JavaScript валидаторы, и все они пришли к выводу, что синтаксис действителен, и «конец ввода» просто отлично. Также он прекрасно работает в моем фрагменте кода.

ВАЖНО: Я извлекаю этот код JavaScript из внешнего файла, поэтому он HTML вместе с этим JS вернулся из AJAX вызова на веб-страницу, которую видит пользователь, заменив предыдущий HTML.

Answer 1

Я нашел решение - это была проблема scope . Попытка извлечь HTML и JavaScript из внешнего файла не сработала при вызове AJAX, поэтому я просто поместил тот же код в секцию complete вызова AJAX того же файла / страницы и это сработало:)