Для отправки jQuery требуется два клика

Question

Попытка отправить форму Ajax, которая в случае успеха возвращает всплывающее окно, однако, кажется, что требуется всего два клика?

Фрагмент:

$(document).ready(function(){

  (function($){
      function processForm( e ){
          $.ajax({
              url: 'https://httpbin.org/get',
              dataType: 'text',
              type: 'get',
              contentType: 'application/x-www-form-urlencoded',
              data: $(this).serialize(),
              success: function( data, textStatus, jQxhr ){
                console.log('success' + data)
                $('.join').click(function() {
                  $('.overlay').show();
                });
                $('#video').html( data );
              },
              error: function( jqXhr, textStatus, errorThrown ){
                  console.log( errorThrown );
              }
          });

          e.preventDefault();
      }

      $('#form').submit( processForm );
  })(jQuery);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay" style="display: none;"> <!-- START OVERLAY -->

    <div class="overlay_cont">
      <div class="logo_white"></div>
      <!-- <div class="share_link">
        <input type="hidden" id="input-url" value="Copied!">
       <button class="btn-copy">Share link</button>
     </div> -->
      <div class="video">
        <video  id="v1" width="960" height="420" controls="controls"></video>
      </div>
    </div>
</div>

<div class="container">
<div id="main">
  <div class="title">
    <h1> </br> Amazing </br>live streaming</h1>
  </div>
  <div id="login">
    <h2>Join Call</h2>
    <form id="form">
      <label for="callid">Call ID:</label> </br>
      <input type="callid" name="callid"> </br>
       </br>
      <label for="passcode">Passscode:</label> </br>
      <input type="passcode" name="passcode">
      </br>
      <button class="join" type="submit">Join</button>
    </form>


  </div>
</div>

Codepen: https://codepen.io/LukaDadiani/pen/wjqXXY

Answer 1

Вам нужно принять событие клика за пределами AJAX, как это

$(document).ready(function(){
  $('.join').click(function() {
   $('.overlay').show();
  });
  (function($){
      function processForm( e ){
          $.ajax({
              url: 'https://httpbin.org/get',
              dataType: 'text',
              type: 'get',
              contentType: 'application/x-www-form-urlencoded',
              data: $(this).serialize(),
              success: function( data, textStatus, jQxhr ){
                console.log('success' + data)

                $('#video').html( data );
              },
              error: function( jqXhr, textStatus, errorThrown ){
                  console.log( errorThrown );
              }
          });

          e.preventDefault();
      }

      $('#form').submit( processForm );
  })(jQuery);

})

Answer 2

Ну, вы можете сделать следующее:

Изменить это:

$('#form').submit( processForm );

к этому:

$('#form').click(function() { 
    processForm();
});

И ваша кнопка должна быть:

<button class="join" type="button">Join</button>

вместо type = "submit".

Answer 3

код должен выглядеть следующим образом

 $(document).ready(function(){
     Function submitForm(){
           Write Ajax function here
     }
      $(#formid).on("submit", function (event){
              event.preventDefault();
               submitFunction()
      });
 }):

Answer 4

Когда вы нажимаете в первый раз, запускается функция processForm, поэтому ajax отправляется, но в вашем успешном слушателе у вас есть

console.log('success' + data)    
$('.join').click(function() {
    $('.overlay').show();
});
$('#video').html( data );

, поэтому вы должны нажать еще раз на join, чтобы отобразить overlay. Вы должны просто удалить событие клика:

console.log('success' + data)    
$('.overlay').show();
$('#video').html( data );