Код AJAX не работает только на iPad

Question

Мы создали страницу регистрации на мероприятие, где некоммерческие организации могут добавлять добровольцев на мероприятие.Страница отлично работает на всех платформах, кроме iPad.(iPhone Safari работает.)

На iPad нажатие кнопки id=add-volunteer не имеет никакого эффекта.Желаемое поведение заключается в том, что нажатие на кнопку добавляет имя добровольца в список зарегистрированных добровольцев и сохраняет информацию о пользователе в бэкэнде.(Другие бэкэнд-задачи, такие как отправка приглашения по электронной почте, также должны выполняться на бэкэнде.)

HTML

<form id="form-add" method="post">
<input type="hidden" name="csrfmiddlewaretoken">


<div class="row one-margin-bottom center">
  <div id="new-volunteers" class="small-12 medium-8 small-centered columns">
    <h6 class="left">Add volunteer</h6>

    <div class="row">
      <div class="input-right small-6 columns">
        <input class="center" id="new-firstname" name="user_firstname" placeholder="First name" type="text" required="">
      </div>

      <div class="input-right small-6 columns">
        <input class="center" id="new-lastname" name="user_lastname" placeholder="Last name" type="text" required="">
      </div>

      <div class="input-right small-12 medium-12 columns">
        <input class="lead center" id="new-email" name="user_email" placeholder="Email address" type="email" required="">
      </div>
    </div>

    <div class="no-margin-top qtr-margin-bottom checkbox center">

      <input type="checkbox" name="invite-optin" id="invite-optin" class="custom-checkbox" checked="">
      <label for="invite-optin">Invite volunteer to openCurrents</label>
    </div>

    <a id="add-volunteer" class="half-margin-bottom button round small secondary">
      Add volunteer
    </a>
  </div>
 </div>
</form>

<form id="form-checkin" method="post">
  <input type="hidden" name="csrfmiddlewaretoken">

<div class="row">
  <div class="small-12 medium-8 small-centered columns">
    <h6 class="left half-margin-bottom">Registered volunteers</h6>

    <div class="row">
      <div class="left small-8 columns">
        <p class="small-text half-margin-top half-margin-bottom"><strong>Name / Email</strong></p>
      </div>

      <div class="right small-4 columns">
        <p class="small-text half-margin-top half-margin-bottom"><strong>Check in</strong></p>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div id="registered-volunteers" class="small-12 medium-8 small-centered columns">


    </div>
  </div>
</form>

<div class="row">
  <a href="/org-admin/" class="button round small secondary">
    Back to org home
  </a>
</div>

JS

let onCheckClick = function(event) {
  let name = event.target.name;
  let elem = $(`#${name}`);
  let userid = elem.val();
  let isChecked = elem.prop("checked");

  $.ajax({
    url: "{% url 'openCurrents:event_checkin' event_id %}",
    type: 'POST',
    data : {
      csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[1].value,
      userid: userid,
      checkin: isChecked
    },
    dataType : "json",
    context: document.body
  }).done(function( data ){
    // console.log('checkin request:');
    // console.log(data);
    if (isChecked) {
      let dt = new Date();
      $(`#vol-status-${userid}`).text(`${dt.toLocaleTimeString()}`);
      $(`#vol-status-${userid}`).show();
    }
    else {
      $(`#vol-status-${userid}`).text(`${data.responseText} min.`);
    }
  }).fail(function (data) {
    // console.log('checkin error:')
    // console.log(data);
    elem.prop('checked', false);
    $('#live-dashboard-error').slideDown();
  });;
};

$(document).ready(function(){
  // bind all existing checkbox to checkin
  $("input[name^='vol-checkin']").click(onCheckClick);

  $("#add-volunteer").click(function(event){
    if ($(this).attr('disabled') === 'disabled') {
      $('#live-dashboard-checkin-disabled').slideDown();
      return;
    }

    if ($('#new-firstname').val() == '' || $('#new-lastname').val() == '' || $('#new-email').val() == '') {
      $('#vol-error').slideDown();
    } else if ( !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($('#new-email').val() ))  ) {
      $('#vol-error').slideUp();
      $('#email-error').slideDown();
    } else {
      $('#vol-error').slideUp();
      $('#email-error').slideUp();

      let new_firstname = $('#new-firstname').val();
      let new_lastname = $('#new-lastname').val();
      let new_email = $('#new-email').val();
      let invite_optin = $('#invite-optin').prop('checked');
      let process_signup_url;
      let form_data = {
        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
        user_firstname: new_firstname,
        user_lastname: new_lastname,
        user_email: new_email.toLowerCase()
      };

      if (invite_optin) {
        process_signup_url = "{% url 'openCurrents:process_signup' endpoint=True verify_email=True %}"
        form_data['org_admin_id'] = {{ user.id }};
      }
      else {
        process_signup_url = "{% url 'openCurrents:process_signup' endpoint=True verify_email=False %}"
      }

      form_data['signup_status'] = 'vol'

      $.ajax({
        url: process_signup_url,
        type: 'POST',
        data: form_data,
        dataType : "json",
      }).done(function( data ) {
        // console.log('signup response:')
        // console.log(data);
        let userid = data;

        let form_data = {
          csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
          userid: userid
        }

        $.ajax({
          url: "{% url 'openCurrents:event_register_live' eventid=event.id %}",
          type: 'POST',
          data: form_data,
          dataType : "json",
        }).done(function( data ) {
          //console.log('register_live response:')
          //console.log(data);
          // hide any error messages present
          $('#vol-exist').slideUp();
          $('#live-dashboard-error-register').slideUp();
          $('#live-dashboard-error').slideUp();
          $('#vol-error').slideUp();
          $('#email-error').slideUp();
          $('#live-dashboard-not-in-progress').slideUp();

          if (data.event_status >= 0) {
            $('#registered-volunteers').prepend(`
              <div class="row"> \
                <div class="left small-9 columns"> \
                  <p class="half-margin-top"> \
                    ${new_firstname} \
                    ${new_lastname} \
                  </p> \
                </div> \

                <div class="right small-3 columns"> \
                    <input {% if checkin_disabled %}disabled{% endif %} type="checkbox" id="vol-checkin-${userid}" name="vol-checkin-${userid}" value="${userid}" class="hidden checkin-checkbox"/> \

                    <label class="checkin-checkbox-icon" for="vol-checkin-${userid}"> \
                      <i class="fa fa-lg fa-check-circle"></i> \
                    </label> \
                </div> \
              </div> \
            `)

            // clear form inputs
            $('#new-firstname').val('');
            $('#new-lastname').val('');
            $('#new-email').val('');
            $('#invite-optin').attr("checked", true);

            // bind new checkbox to checkin
            $(`input[name='vol-checkin-${userid}']`).click(onCheckClick);
            if (data.event_status == 1) {
              $(`input[name='vol-checkin-${userid}']`).trigger('click')
            } else {
              $('#live-dashboard-not-in-progress').slideDown();
            }
          }
          else {
            $('#new-firstname').val('');
            $('#new-lastname').val('');
            $('#new-email').val('');
            $('#invite-optin').attr("checked", true);
            $('#vol-exist').slideDown();
          }
        }).fail( function (data) {
          // console.log('register_live error:')
          // console.log(data);
          $('#live-dashboard-error').slideDown();
        });
      }).fail(function (data) {
        // console.log('signup error:')
        // console.log(data);
        $('#live-dashboard-error').slideDown();
      });

    }
  });