AJAX表单提交需点击两次才触发success回调问题求助

API 探路者

2026-10-7

问题根因及修复方案

根因1：事件绑定未生效

你当前使用的直接选择器绑定点击事件的写法$('#time_entry_submit').click(function(){})，如果JS代码执行时#time_entry_submit元素尚未渲染到DOM中（比如表单为动态生成、JS代码放置在页面头部未等待DOM加载完成就执行），首次绑定会找不到目标元素，绑定逻辑直接失效。
第一次点击时无对应触发事件，自然不会输出日志、也不会执行AJAX请求。首次点击后默认的表单提交/局部渲染逻辑执行后，目标元素完成渲染、JS绑定逻辑重新执行，第二次点击才能触发对应逻辑。
修复方案：
优先使用事件委托绑定，无需依赖目标元素的加载时机：

$(document).on('click', '#time_entry_submit', function(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var url = $(this).parents('form:eq(0)').attr('action');
  $.ajax({
    url: url,
    method: 'POST',
    dataType: 'script',
    success: function(response) {
      window.alert(response);
      location.reload();
    },
    error: function(err) {
      console.error('请求异常', err);
    }
  })
  return false;
})

如果确认元素是页面初始化就渲染的，也可以把绑定逻辑包裹在DOM加载完成回调中：

$(function(){
  $('#time_entry_submit').click(function(evt){
    // 其余逻辑同上
  })
})

根因2：AJAX响应类型配置错误

你代码中配置的datatype: 'json'与实际后端返回的内容类型不匹配，后端实际返回的是可执行的JS脚本（你alert弹出的内容就是返回的脚本），类型不匹配会导致请求成功后也不会进入success回调，而是进入error回调，你未配置error回调所以无法感知该异常。
修复方案：
将datatype: 'json'修改为dataType: 'script'，或者直接删除该配置项，让jQuery自动根据响应头识别返回内容类型即可。