我正在尝试检索动态创建的表单元素的值，以便将它们输入到数据表中。这就是我现在所拥有的 -
$( document ).on( "click", ".save-modal", function() {
var count = $('#sample_2').dataTable().fnSettings().aoData.length + 1;
$('#sample_2').dataTable().fnAddData( [
count,
$('#locations-' + count + '-address1').val(),
$('#locations-' + count + '-city').val(),
$('#locations-' + count + '-state').val(),
$('#locations-' + count + '-postal_code').val(),
$('#locations-' + count + '-pickup_weight').val(),
$('#locations-' + count + '-delivery_weight').val(),
$('#locations-' + count + '-arrival_date').val(),
"<a class=\"delete-row\" href=\"\">Delete<\/a>" ]
);
$('.new-modal').prop('href', '#responsive-' + (count + 1));
});
function create_modal(index){
var modal = '<div id=\"responsive-' + index + '\" class=\"modal fade\" tabindex=\"-1\" data-width=\"840\" style=\"display: none;\">' +
' <div class=\"modal-header\">' +
' <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">' +
' ×' +
' <\/button>' +
' <h4 class=\"modal-title\">Add Location<\/h4>' +
' <\/div>' +
' <div class=\"modal-body\">' +
' <div class=\"row\">' +
' <div class=\"panel panel-default\">' +
' <div class=\"panel-heading\">' +
' <i class=\"fa fa-external-link-square\"><\/i>' +
' Location - ' + index + '' +
' <\/div>' +
' <div class=\"panel-body\">' +
' <div class=\"row\">' +
' <div class=\"col-md-12\">' +
' <h4>General<\/h4>' +
' <hr>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Address <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-address1\" name=\"locations-' + index + '-address1\" class=\"form-control\" value=\"\">' +
' <\/div>' +
' <\/div>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' City <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-city\" name=\"locations-' + index + '-city\" class=\"form-control\">' +
' <\/div>' +
' <\/div>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' State <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-state\" name=\"locations-' + index + '-state\" class=\"form-control\">' +
' <\/div>' +
' <\/div>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Zip Code <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-postal_code\" name=\"locations-' + index + '-postal_code\" class=\"form-control\"\>' +
' <\/div>' +
' <\/div>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Arrival Date <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-arrival_date\" name=\"locations-' + index + '-arrival_date\" data-date-format=\"dd-mm-yyyy\" data-date-viewmode=\"years\" class=\"form-control date-picker\">' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <div class=\"row\"><hr><\/div>' +
' <div class=\"row\">' +
' <div class=\"col-md-12\">' +
' <h4>Receiver<\/h4>' +
' <hr>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Name <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-contact_name\" name=\"locations-' + index + '-contact_name\" class=\"form-control\"\>' +
' <\/div>' +
' <\/div>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Phone <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-contact_phone\" name=\"locations-' + index + '-contact_phone\" class=\"form-control\"\>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <div class=\"row\"><hr><\/div>' +
' <div class=\"row\">' +
' <div class=\"col-md-6\">' +
' <h4>Pickup<\/h4>' +
' <hr>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Weight <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-pickup_weight\" name=\"locations-' + index + '-pickup_weight\" class=\"form-control\">' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <div class=\"col-md-6\">' +
' <h4>Delivery<\/h4>' +
' <hr>' +
' <div class=\"form-group\">' +
' <label class=\"col-sm-3 control-label\">' +
' Weight <span class=\"symbol required\"><\/span>' +
' <\/label>' +
' <div class=\"col-sm-7\">' +
' <input type=\"text\" id=\"locations-' + index + '-delivery_weight\" name=\"locations-' + index + '-delivery_weight\" class=\"form-control\">' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <\/div>' +
' <div class=\"modal-footer\">' +
' <button type=\"button\" data-dismiss=\"modal\" class=\"btn btn-light-grey\">' +
' Close' +
' <\/button>' +
' <button type=\"button\" data-dismiss=\"modal\" class=\"btn btn-blue save-modal\">' +
' Add' +
' <\/button>' +
' <\/div>' +
'<\/div>'
$("form").append(modal);
}
我注意到如果我将一个警告声明放入save-modal动作，数据表将填充。这是代码 -
$( document ).on( "click", ".save-modal", function() {
var count = $('#sample_2').dataTable().fnSettings().aoData.length + 1;
alert('this statement will make the table populate correct');
$('#sample_2').dataTable().fnAddData( [
count,
$('#locations-' + count + '-address1').val(),
$('#locations-' + count + '-city').val(),
$('#locations-' + count + '-state').val(),
$('#locations-' + count + '-postal_code').val(),
$('#locations-' + count + '-pickup_weight').val(),
$('#locations-' + count + '-delivery_weight').val(),
$('#locations-' + count + '-arrival_date').val(),
"<a class=\"delete-row\" href=\"\">Delete<\/a>" ]
);
$('.new-modal').prop('href', '#responsive-' + (count + 1));
});
我还注意到，如果我将模态附加到“body”标签，那么我的数据表将正常工作。
有谁知道造成这种情况的原因是什么？