Выбор нескольких ячеек таблицы с помощью событий touchstart и touchmove не запускается на мобильном устройстве

ниже мой код, который работает с щелчком мыши и событием перетаскивания, но не работает с touchstart и touchmove. я скопировал отсюда образец кода Выбрать ячейки в таблице путем перетаскивания i также хотите добавить динамическую таблицу, чтобы этот код работал с динамической добавленной таблицей

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <style type="text/css" media="screen">
    table td {
      width:100px;
      height:100px;
      text-align:center;
      vertical-align:middle;
      background-color:#ccc;
    }

    table td.highlighted {
      background-color:#F00;
    }
  </style>
</head>
<body>
  <table cellpadding="0" cellspacing="1" id="our_table">
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
    <tr>
      <td>g</td>
      <td>h</td>
      <td>i</td>
    </tr>
  </table>

  <!-- 1. jQuery UI -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

<!-- 2. Include touch punch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" integrity="sha512-0bEtK0USNd96MnO4XhH8jhv3nyRF0eK87pJke6pkYf3cM0uDIhNJy9ltuzqgypoIFXw3JSuiy04tVk4AjpZdZw==" crossorigin="anonymous"></script>
  <script type="text/javascript" charset="utf-8">
    $(function () {
  var isMouseDown = false,
    isHighlighted;
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    })
    .mouseover(function () {
      if (isMouseDown) {
        $(this).toggleClass("highlighted", isHighlighted);
      }
    })
    
    $(document).on('touchstart', '#our_table td', function(){
        isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    });
    
    $(document).on('touchmove', '#our_table td', function(){
        if (isMouseDown) {
        $(this).toggleClass("highlighted", isHighlighted);
      }
    });


  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });
    
});
    
  </script>
</body>
</html>

css touchstart touchmove
person Killer God    schedule 10.04.2021    source источник