jQuery клик не показывает спиннер при клике

Question

У меня есть форма, где пользователь может загружать файлы. Если он выбрал файл, и он нажимает кнопку подтверждения, я хочу скрыть текст сообщения проверки и вместо этого показать счетчик. но после нажатия на кнопку он не показывает счетчик. Загрузчик показал, удаляю ли я условие if. но я хочу, чтобы счетчик показывал только, что файл выбран, и пользователь нажимает кнопку подтверждения.

$(document).ready(function() {
  if ($('#emailList').val()) {
    $("#emailListVerify").click(function() {
      $("#verifyEmailsLoading").show();
      $("#verifyEmailsText").hide();
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="email_verify.php" method="post" enctype="multipart/form-data">
  <div class="upload-container" id="upload_btn">
    <input type="file" name="email_list" id="emailList" required>
  </div>
  <button type="submit" name="email-list-verify-submit" id="emailListVerify" class="btn btn-primary w-md waves-effect waves-light">
    <span id="verifyEmailsLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
    <span id="verifyEmailsText">Verify Emails</span>
  </button>
</form>

Answer 1

Пара вещей:

• Не заключайте слушатели событий в операторы if, а скорее делайте проверку внутри обработчика событий.
• Я думаю, что встроенный стиль 'display: none' переопределяет тумблер
• В обработчике события верните false, чтобы предотвратить перезагрузку страницы, и добавьте свои логики c над возвратом

$(document).ready(function() {
 $("#verifyEmailsLoading").hide();
  $("#emailListVerify").click(function() {
   if ($('#emailList').val()) {
      $("#verifyEmailsLoading").show();
      $("#verifyEmailsText").hide();
      return false;
   }
  });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="email_verify.php" method="post" enctype="multipart/form-data">
  <div class="upload-container" id="upload_btn">
    <input type="file" name="email_list" id="emailList" required>
  </div>
  <button type="submit" name="email-list-verify-submit" id="emailListVerify" class="btn btn-primary w-md waves-effect waves-light">
    <span id="verifyEmailsLoading" role="status">Loading</span>
    <span id="verifyEmailsText">Verify Emails</span>
  </button>
</form>