jQuery - 使用 AJAX 从另一个页面加载帖子表单

Question

我正在尝试使用 JQuery 提交表单而不重新加载页面。虽然这与独立页面上的 jQuery 表单插件配合得很好，但我需要它在我使用 AJAX 加载的页面上工作。

<script type="text/javascript"> 
  $('#LoadForm').click(function() {
    $('#formDiv1').load('FormGen.asp');
  });
</script>

但是，当我在加载的表单上单击“提交”时，表单会提交并刷新页面，而不是仅使用 AJAX 提交。

<script type="text/javascript"> 
 // wait for the DOM to be loaded 
 $(document).ready(function() { 
   // bind 'myForm' and provide a simple callback function 
   $('#myForm').ajaxForm(function() { 
      alert("Thank you for your comment!"); 
   }); 
 }); 
</script> 

如果我将代码放在我调用的页面中并使用该独立版本，它就可以完美工作。但是，当我尝试从另一个页面加载表单时，它不起作用。

Answer 1

当您的页面加载时，元素 #myForm页面中尚不存在(因为您使用ajax加载)，因此 ajaxForm()插件未初始化。

当你的ajax内容成功加载时，你应该初始化它。为此，请使用 .load() 的回调参数加载发生时执行的方法:

$('#formDiv1').load('FormGen.asp', function(data, status, xhr) {

    // this is executed when the load has finished
    $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 

});