Question

尝试提交一个Ajax表单，如果成功返回弹出窗口，但似乎只需要两次点击？

摘录：

＆＃13;

$(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);

})

＆＃13;

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

＆＃13;

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

Answer 1

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

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

因此您必须点击join上的其他时间才能显示overlay。你应该juste删除你点击事件：

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

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

你需要在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);

})

jQuery提交需要两次点击才能工作

4 个答案: