Question

我一直在使用jquery表单插件在我的页面上使用submi表单，效果很好。

但是当我尝试提交一个使用.load加载的表单时，它不起作用。

这是我的代码：

$(document).ready(function() {                 
  //shows loading screen whilst posting via ajax
  $().ajaxStart($.blockUI).ajaxStop($.unblockUI);

  //post form add_customer ajax
  var options = { 
    target: '#alert',   
  };
  $.ajaxSettings.cache = false;
  $('#add_customer').submit(function() {
    $(this).ajaxSubmit(options);
    return false;
  }); 

  $('#theform').hide().load('form.php', function() {
    $(this).fadeIn();
    return false;
  });
});

我错过了什么？无法在任何地方找到解决方案。

Answer 1

在form.php中加载的HTML中是否包含id为“add_customer”的表单？如果是这种情况，则在元素可用之前发生您正在应用的提交方法绑定。要修复它，请在加载回调中移动方法绑定：

$(document).ready(function() {                 
  //shows loading screen whilst posting via ajax
  $().ajaxStart($.blockUI).ajaxStop($.unblockUI);

  $('#theform').hide().load('form.php', function() {
    //post form add_customer ajax
    var options = { 
      target: '#alert',   
    };
    $.ajaxSettings.cache = false;
    $('#add_customer').submit(function() {
      $(this).ajaxSubmit(options);
      return false;
    }); 

    $(this).fadeIn();
    return false;
  });
});

Answer 2

如果您在文件form.php中有javascript代码并使用$.load()获取，则所有js代码都将被删除，您只会获得HTML部分。

使用$.get加载整个页面，包括js代码。

$.get('form.php',
      {},
      function(data){
        $('#theform').html(data).fadeIn();
      });

现在form.php中的所有js代码都会在加载并添加到#theform区域后运行。

Jquery表单插件。提交加载表单的问题

2 个答案: