您使用AJAX将表单动态添加到DOM中,这是异步的。所以当你打电话的时候
$('form').submit()
要绑定处理程序,表单尚未在DOM中。您需要在添加表单后调用它,方法是在
success:
作用
而且
$(this).parent("form").submit()
应该是
$(this).submit()
.
$(this)
是表单,您不需要转到它的父级。你应该使用
event.preventDefault()
以防止正常表单提交的发生。
$(document).ready(function() {
var table = $('#myTransactionitems').dataTable(); //Initialize the datatable
var user = $(this).attr('id');
if(user != '')
{
$.ajax({
url: 'transactions',
dataType: 'json',
cache:false,
success: function(s){
console.log(s);
table.fnClearTable();
for(var i = 0; i < s.length; i++) {
var disp1 = '';
if (s[i][4] != 'Reserved') {
disp1 = 'display:none;'
}
table.fnAddData([
"<form method='post' action='reservesplit'><input name = 'transactionID' type='hidden'\
value='"+s[i][0]+"'></input><input type='submit' id = 'btn-bank' name='btn-bank' value = '"+s[i][0]+"' class='btn btn-link'>\
</input></form>",
s[i][1],
s[i][2],
s[i][3],
s[i][4],
s[i][5],
"<form method='post'><input name = 'transactionID' type='hidden'\
value='"+s[i][0]+"'><input name = 'donationID' type='hidden'\
value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\
value='"+s[i][3]+"'></input></input><input type='submit' id = 'btn-paid' name='btn-paid' value = 'Paid' style='" + disp1 +"' class='btn btn-success btn-sm pull-left '>\
</input></form><form method='post'><input name = 'transactionID' type='hidden'\
value='"+s[i][0]+"'><input name = 'donationID' type='hidden' \
value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\
value='"+s[i][3]+"'></input><input type='submit' id = 'btn-cancel' name='btn-cancel' value = 'Cancel' style='" + disp1 +"' class='btn btn-danger btn-sm pull-right'>\
</input></form>"
]);
} // End For
$('form').submit(function(e){
alert("hello");
e.preventDefault();
$(this).find(':submit').attr('disabled','disabled');
$(this).submit();
});
},
error: function(e){
console.log(e.responseText);
}
});
}
});
或者可以使用事件委托,如中所述
Event binding on dynamically created elements?