javascript - 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>

代码笔: https://codepen.io/LukaDadiani/pen/wjqXXY

Answer 1

当你第一次点击时，processForm函数被运行，因此ajax被发送，但在你的成功监听器中，你有

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

因此您必须再次单击join 才能显示叠加层。您应该删除您的点击事件:

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