Javascript jQuerySubmit需要两次单击才能工作

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

片段：

$（文档）.ready（函数（）{
（函数（$）{
函数processForm（e）{
$.ajax({
网址：'https://httpbin.org/get',
数据类型：“文本”，
键入：“get”，
contentType:'application/x-www-form-urlencoded'，
数据：$（this）.serialize（），
成功：函数（数据、文本状态、jQxhr）{
console.log（'success'+数据）
$（'.join'）。单击（函数（）{
$（'.overlay'）.show（）；
});
$（'#video'）.html（数据）；
},
错误：函数（jqXhr、textStatus、errorshown）{
console.log（错误抛出）；
}
});
e、 预防默认值（）；
}
$（'表格'）。提交（处理表格）；
})（jQuery）；
})

精彩
流媒体直播
加入呼叫
呼叫ID:





密码：



参加

当您第一次单击时，会运行

processForm

函数，因此会发送ajax，但在成功侦听器中，您有

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

因此，您必须再次单击

join

以显示

覆盖图。您只需删除您单击的事件：

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

当您第一次单击时，会运行
processForm
函数，因此会发送ajax，但在成功侦听器中，您有

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

因此，您必须再次单击
join
以显示
覆盖图。您只需删除您单击的事件：

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

那么，您可以执行以下操作：

更改此项：

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

为此：

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

您的按钮必须是：

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

加入

您可以执行以下操作，而不是type=“submit”。
好的：

更改此项：

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

为此：

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

您的按钮必须是：

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

加入

代码应该如下所示，而不是type=“submit”。

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

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

})

代码应该是这样的

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

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

})

您需要像这样在AJAX之外执行click事件

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

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

})

您需要像这样在AJAX之外执行click事件

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

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

})

你确定在第一次单击之前等待脚本运行吗？是的，我等待脚本运行仍然需要两次单击才能测量你确定在第一次单击之前等待脚本运行吗？是的，我等待脚本运行仍然需要两次单击才能测量它提交一个发送Ajax的表单。这是一次单击，然后分配单击事件并显示需要再单击一次在第一次单击期间，它提交一个发送Ajax的表单。这是一次单击，之后您将分配单击事件并需要再次单击才能显示