下の画像のような行を持つテーブルがあります。オンライン注文リンクをクリックすると、2 番目の画像のように行のすぐ下にフォームが表示されます。
最初の画像
2番目の画像
今私がやっていることは、送信ボタンがクリックされたときに ajax リクエストを開始することです。要求は最初のインスタンスで成功します。しかし、リクエストが再度発行されると、機能しません。それは同じように機能し<tr>
ますが、2番目のオンライン注文<tr>
がクリックされ、フォームがその下にロードされると<tr>
、サブミット ajax は機能しません。
$(document).ready(function(){
var $form = $('.form'), $table = $('.table');
$table.on('click', '.link', function(e) {
e.preventDefault();
$table.find('tr.temp-row').remove();
$(this).closest('tr').after(function() {
var $tr = $('<tr class="temp-row"><td colspan="4"></td></tr>');
return $tr.find('td').html($form).end();
});
});
$("#cancel").click(function(){
$form.hide();
});
$("#submit").click(function(){
var request = $.ajax({
url: "processform.php",
type: "POST",
//data: {msg : msg},
dataType: "html"
});
request.done(function(msg) {
//$("#log").html( msg );
alert(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
return false;
})
});
私のprocessform.php
ページは、それを要求したページで警告されたテキストを返すだけです。