jquery ajaxform 动态表单需要两次点击答案

【问题标题】：Jquery ajaxform requires two clicks for dynamic formjquery ajaxform 动态表单需要两次点击
【发布时间】：2017-05-11 03:21:58
【问题描述】：

我有一个使用 ajax 动态加载的表单。加载后，我就可以提交表单以便重新加载页面。我现在正在尝试 ajaxify 表单，这样我就不必重新加载页面。我正在使用 malsup 的 ajaxform 插件，但是我无法正确使用此插件，因为我正在尝试 ajaxify 动态加载的表单。目前，使用下面的代码，它要求我提交表单两次才能进行任何更改。换句话说，一旦使用页面上的上一个按钮加载表单，我就必须单击提交按钮两次才能提交表单。在第一次单击后，不提交表单，其他所有单击都会提交。我不明白为什么我第一次必须提交两次表格。请在下面查看我的代码。

$(document).ready(function() {   
    var options = {  
    beforeSubmit: showRequest,
    error:  showError,  // error
    success: showResponse  // post-submit callback 
}; 
$(document).on('submit', '#send-form', function(event) { 
               $('#send-form').ajaxForm(options);
               return false;
});
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
  alert('Please wait...','Please wait...');
  return true; 
} 
// error callback
function showError(er, err, error) {  
  var currentAlert = $.jAlert('current');
  currentAlert.closeAlert();
  errorAlert('Error','Try Again Later');
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
  var currentAlert = $.jAlert('current');
  currentAlert.closeAlert();
  successAlert('Success!', 'Your form has been sent');
} 

<form action="" method="post" id="send-form">
<input type="submit" class="submit-btn" name="modal-form" value="submit" />
</form>

我尝试使用 ajaxSubmit 而不是 ajaxForm，因为我知道 ajaxform 实际上并不提交表单。当我这样做时，表单似乎在第一次点击时提交（所有警报都会出现），但实际上没有提交任何内容。我将不胜感激。

【问题讨论】：

标签： click submit ajaxform ajaxsubmit

【解决方案1】：

你在这里发送什么数据？你要把它们送到哪里？

我猜你需要在你的 onSubmit 函数中添加一个event.preventDefault。

我建议使用 $.post() 函数。你可以在这里找到更多信息：https://api.jquery.com/jquery.post/

【讨论】：

【解决方案2】：

找出问题所在。我不得不在页面加载时调用 ajaxform，然后提交。不提交然后调用ajaxform。无论如何，这似乎有效。

$(document).ready(function() { 
  var options = {  
    type: 'post',
    beforeSubmit: showRequest,
    error:  showError,  // error
    success: showResponse  // post-submit callback 
  }; 
$('#send-form').ajaxForm(options);
$('#send-form').live('submit', function (e) {
      e.preventDefault();
    });
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
return true; 
alert('Please wait...');
} 
// error callback
function showError(er, err, error) {  
var currentAlert = $.jAlert('current');
currentAlert.closeAlert();
errorAlert('Error','Try Again Later');
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
var currentAlert = $.jAlert('current');
currentAlert.closeAlert();
successAlert('Success!', 'Your form has been sent');
} 

<form action="" method="post" id="send-form">
<input type="submit" class="submit-btn" name="modal-form" value="submit" />
</form>

【讨论】：