jQuery - 在父页面（？）的DIV中加载表单提交

Question

我有以下代码，该代码完美无缺......迄今为止。但我想接下来有一个表单加载...阅读以下代码的解释。

主页：

<li><a href="content1.php" class="load-external" data-target="#right_section">Some Content</a></li> 
<div id="right_section"></div> 

<script> 
$('body').on('click', 'a.load-external', function(e){ 
var target = $($(this).attr('data-target')); 
target.load($(this).attr('href')); 
e.preventDefault(); 
}); 
</script> 

content1.php

<li><a href="content2.php" class="load-external" data-target="#right_section">Some Content 2</a></li> 

现在，在content1.php，所有链接（A HREF = ...）工作的伟大，并加载到#right_section div。

但在content1.php上，我也有一些形式，我希望它们也加载到同一个div #right_section。一种形式的示例如下：在content1.php

样表：

<form action="report_output.php" method="get" id="graphIt"> 

我怎样才能得到一个形式（任何形式的，可能有多个页面上）加载到div #right_section，没有加载整个页面（它现在所做的）

谢谢！

Answer 1

您需要替换表单的提交处理程序，类似于您替换链接上的常规点击处理程序的方式。

HTML：

<form action="report_output.php" class="load-external" method="get" id="graphIt" data-target="#right_section"> 

JS：

$('body').on('submit', 'form.load-external', function(e) { 
    e.preventDefault(); 
    var target = $($(this).data('target')); 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     data: $(this).serialize(), 
     dataType: 'html', 
     success: function(response) { 
      target.html(response); 
     } 
    }); 
});