jQuery - 使用 AJAX 从另一个页面加载表单答案

【问题标题】：jQuery - Post Form Loaded from another page using AJAXjQuery - 使用 AJAX 从另一个页面加载表单
【发布时间】：2012-02-11 08:27:59
【问题描述】：

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

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

【问题讨论】：

我认为你的问题是 $(document).ready 永远不会为动态加载的页面执行。您可以尝试在页面末尾添加该方法中包含的代码，但不添加任何事件处理程序。

标签： jquery ajax load ajaxform

【解决方案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!"); 
    }); 

});

【讨论】：

【解决方案2】：

更新：

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

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

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

尝试使用live() function：

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

【讨论】：

【解决方案3】：

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

【讨论】：

绑定...事件，而不是在通过 ajax 添加的元素上初始化插件实例。这个答案不仅缺乏内容，而且我真的很想知道它是否可以解决暴露的问题。