jQuery Ajax表单提交需两次点击才生效的问题求助

你遇到的这个问题其实很常见，核心原因是弹窗的点击事件绑定时机不对。咱们来拆解下你的代码逻辑：

你把 .join 的点击事件绑定放在了Ajax请求的success回调里——第一次点击提交表单时，Ajax请求完成后才给这个元素加上点击事件，这时候第一次点击已经结束了，所以必须再点一次才能触发弹窗。

解决方案1：直接在success回调里显示弹窗（推荐） #

既然表单提交成功后就该触发弹窗，没必要再等一次点击，直接在success回调里调用$('.overlay').show()就行：

$(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);
          // 提交成功直接显示弹窗
          $('.overlay').show();
          $('#video').html( data );
        },
        error: function( jqXhr, textStatus, errorThrown ){
          console.log( errorThrown );
        }
      });
      e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
    }

    // 绑定表单的提交事件
    $('form').on('submit', processForm);
  })(jQuery);
});

解决方案2：提前绑定点击事件（若需保留手动点击逻辑） #

如果你确实需要保留“点击.join按钮显示弹窗”的交互，那得把事件绑定移到Ajax回调外面，确保页面加载完成时就绑定好：

$(document).ready(function(){
  (function($){
    // 页面加载完成就绑定点击事件，无需等Ajax请求
    $('.join').click(function() {
      $('.overlay').show();
    });

    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 );
          // 若需要提交成功后自动触发弹窗，可直接调用click()
          // $('.join').click();
        },
        error: function( jqXhr, textStatus, errorThrown ){
          console.log( errorThrown );
        }
      });
      e.preventDefault();
    }

    $('form').on('submit', processForm);
  })(jQuery);
});

另外补充一点：你的原代码里可能遗漏了e.preventDefault()，如果没阻止表单的默认提交行为，页面会刷新，这也会导致交互异常，一定要加上哦。

内容的提问来源于stack exchange，提问作者Lukas_T