Question

我正在尝试使用JQuery提交表单而不重新加载页面。虽然这对于独立页面上的jQuery Form Plugin很有效，但我需要它在我加载了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()方法的callback参数：

$('#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!"); 
    }); 

});

Answer 2

<强>更新

eerrrr ...我的坏，没有正确阅读问题--Didier Ghys的回答似乎更合适。

click()将事件处理程序绑定到“click”JavaScript事件。绑定在脚本执行时完成。

由于您通过ajax提交了巡回表单，我认为在加载表单之前调用click()函数，因此没有绑定。

尝试使用live() function：

  $('#LoadForm').live("click", function() {
     $('#formDiv1').load('FormGen.asp');
  });

Answer 3

您需要使用on()方法绑定到AJAX加载的内容 - http://api.jquery.com/on/

jQuery - 使用AJAX从另一个页面加载的Post Form

3 个答案: