AJAXによって動的に追加されたフォームは送信されません

Question

テーブルがあり、このテーブルのすべての行がフォームであり、AJAXを使用してテーブルが最初のコード部分（リセット機能）で非同期にリフレッシュされます。成功部分のhtml関数の結果、送信時コード（クリック時）はfpdfインスタンスを呼び出し、その結果をiframe内に表示します。私がリフレッシュするか、または新しい行を追加するまで、フォームは同期して提出されません。

リセット機能：

function reset() { 

$.ajax({ 
url : 'php_file.php', 
type : 'post', 
data : {reset: 1}, 

success : function(response) { 

    $("#datagrid").remove(); 
    $('#datagrid_div').html(response); 

    } 
}); 
} 

送信機能：

$(document).on("click", ".submit_Btn", function(){ 

     var index = $(this).prop("value"); 

     var values = {}; 

     values['key_'+index] = $('#key_' + index).val(); 

     $.post('php_file.php', values,function(result){ 

     $("#PDF_Div").show(); 
}); 

return 0; 
}); 

私はこのウェブサイト上でここに述べあまりにも多くの回答を試みたが、それのどれもが、この問題に貢献しませんでした。

次のようにHTML部分が見えます：

<input type='button' onclick='reset();'/> 
<div id='datagrid_div'> 

    <table id='datagrid'> 
    <tr> 
    <form target="pdf_frame" method="POST" action="php_file.php"> 
<td>info_1</td> 
    <input type='hidden' id='key_1'/> 
    <input type='submit' class='submit_Btn' value='1'/> 
    </form> 
    </tr> 
    </table> 
</div> 

Answer 1

私はそれが仕事ができる方法を見ていない...

1. リセットした場合、リセットが（）
2. 呼び出されるところ、私は見ることができません（）は呼び出されますが、$（ "#datagrid"）.remove（）;フォームが再度送信されないようにします。
3. テーブルの構文が間違っています。あなたはtrタグを持っていますが、tdタグはありません。そのため、フォームタグはテーブルタグの後におそらく押し込まれます。
4. フォームタグはaction = "php_file.php"を参照します。つまり、送信ボタンをクリックすると（フォームが正しく読み込まれ/レンダリングされた場合）、php_file.phpにデータがポストされ、ajaxを意味するjquery ajaxコールは使用されません。成功呼出しも実行されません。

推奨変更：フォームタグをテーブルの外に置きます。 ajaxがフォーム提出を行うことを期待しているので、フォームタグ内でそれを参照しないでください。

<div id='datagrid_div'> 
    <form> 
    <table id='datagrid'> 
    <tr><td>  
    <input type='hidden' id='key_1'/> 
    <input type='submit' class='submit_Btn'/> 
    </td> 
    </tr> 
    </table> 
    </form> 
</div> 

あなたはクラスとして参照送信ボタンを持ってする理由私は明確ではないです - submitボタンが複数回表示された場合は、すべてが選択されますので、いくつかの呼び出しが掲載されます。

<script> 
$(document).on("click", ".submit_Btn", function(){ 

     var index = $(this).prop("value"); 

     var values = {}; 

     values['key_'+index] = $('#key_' + index).val(); 

     $.post('php_file.php', values,function(result){ 

     $("#PDF_Div").show(); 
}); 

return 0; 
}); 
</script> 

PDFをiframe内で開くように指示する方法がわかりません。私はあなたのiframeに1つのテキスト値を表示してから、そこにPDFを表示する方法を理解する前にまず作業します。