如何让我的jQuery Ajax代码可多次触发执行？

问题根源 #

你之前的修改不生效，核心原因是事件绑定的目标不对：

• submit是form元素的原生事件，委托到form上没问题；
• change是表单控件（input、select、textarea等）的事件，form元素本身不会触发change。原始代码能生效是因为事件冒泡——控件的change事件向上冒泡到父级form，触发了绑定在form上的回调；但改成事件委托时，$("#ajax-progress").on("change", "form", ...)是监听form元素自身的change事件，自然不会触发。

正确解决方案 #

我们需要针对不同事件调整委托目标，同时复用提交逻辑，确保动态生成的表单也能触发事件：

方案1：拆分事件委托，复用提交函数 #

把提交逻辑提取为单独函数，分别对form的submit事件和控件的change事件做委托：

// 绑定submit事件到动态form，绑定change事件到form内的输入控件
$("#ajax-progress")
  .on("submit", "form", handleFormSubmit)
  .on("change", "form :input", function() {
    // 控件change时，触发所属form的submit事件
    $(this).closest("form").submit();
  });

// 统一的表单提交处理函数
function handleFormSubmit(event) {
  event.preventDefault();
  const $form = $(this);
  const sop_id = $form.find('input[name=sop_id]').val();

  $.ajax({
    type: "POST",
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
    url: $form.attr('action'),
    method: $form.attr('method'),
    data: new FormData($form[0]),
    processData: false,
    contentType: false,
    success: function(response) {
      const $request = $.get('/ajax-progress?sop_id=' + sop_id);
      const $container = $('#ajax-progress');

      $container.addClass('loading');

      $request.done(function(includecontent) {
        $container.html(includecontent.html);
      });
      $request.always(function() {
        $container.removeClass('loading');
      });
    }
  });
}

方案2：单委托处理多事件（兼容写法） #

如果想在一个on调用里处理，可通过判断事件源找到对应form：

$("#ajax-progress").on("submit change", "form, form :input", function(event) {
  // 阻止默认行为（submit必须，change可选）
  if (event.type === 'submit') {
    event.preventDefault();
  }
  // 找到当前操作对应的form
  const $form = $(this).is('form') ? $(this) : $(this).closest('form');
  const sop_id = $form.find('input[name=sop_id]').val();

  $.ajax({
    type: "POST",
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
    url: $form.attr('action'),
    method: $form.attr('method'),
    data: new FormData($form[0]),
    processData: false,
    contentType: false,
    success: function(response) {
      const $request = $.get('/ajax-progress?sop_id=' + sop_id);
      const $container = $('#ajax-progress');

      $container.addClass('loading');

      $request.done(function(includecontent) {
        $container.html(includecontent.html);
      });
      $request.always(function() {
        $container.removeClass('loading');
      });
    }
  });
});

关键说明 #

• 事件委托必须绑定到静态父元素（这里是#ajax-progress，它不会被动态替换）；
• 针对不同事件的触发源调整委托选择器，确保事件能被正确捕获；
• 提取复用函数可避免代码冗余，也更易维护。

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