2

我正在尝试使用 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>

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

4

3 回答 3

2

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

});
于 2012-01-16T11:35:29.750 回答
1

更新：

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

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

由于您通过 ajax 浏览表单，我想该click()函数是在加载表单之前调用的，因此没有绑定。

尝试使用该live()功能：

  $('#LoadForm').live("click", function() {
     $('#formDiv1').load('FormGen.asp');
  });
于 2012-01-16T11:37:46.950 回答
-1

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

于 2012-01-16T11:30:53.397 回答