我正在尝试创建一个通过屏幕上的模式填充DataTable的页面。总的来说，我可以添加，编辑和删除数据表。但是，从DataTable中删除后，添加功能将停止工作。可以告诉我发生了什么事吗？
<form name="create" action="" role="form" class="smart-wizard form-horizontal" id="form" method="post">
{{ form.hidden_tag() }}
<!-- start: PAGE CONTENT -->
<div class="row" id="form-container">
<div class="col-sm-12">
<!-- start: FORM WIZARD PANEL -->
<div id="wizard" class="swMain">
<!-- Misc form data, should not be relevant -->
<div id="step-2">
<h2 class="StepTitle">Step 2 Content</h2>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-external-link-square"></i>
Locations
<div class="panel-tools">
<a class="btn btn-xs btn-link panel-collapse collapses" href="#"> </a>
<a class="btn btn-xs btn-link panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> </a>
<a class="btn btn-xs btn-link panel-refresh" href="#"> <i class="fa fa-refresh"></i> </a>
<a class="btn btn-xs btn-link panel-expand" href="#"> <i class="fa fa-resize-full"></i> </a>
<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12 space20">
<a href="#responsive-1" data-toggle="modal" class="new-modal btn btn-green">
Add New <i class="fa fa-plus"></i>
</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" id="sample_2">
<thead>
<tr>
<th>Stop #</th>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Pickup Weight</th>
<th>Delivery Weight</th>
<th>Arrival Date</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<!--- Content created by datatable -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-3">
<button class="btn btn-light-grey back-step btn-block">
<i class="fa fa-circle-arrow-left"></i> Back
</button>
</div>
<div class="col-sm-2 col-sm-offset-3">
<button type="submit" class="btn btn-success btn-block">
Finish <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</div>
<!-- end: FORM WIZARD PANEL -->
</div>
</div>
</form>
<!-- end: RIGHT SIDEBAR -->
<!-- javascript includes are here -->
<script>
$(document).ready(function(){
$(".new-modal").click(function(){
create_modal($('#sample_2').dataTable().fnSettings().aoData.length + 1);
});
$('#sample_2').on('click', '.delete-row', function(event) {
event.preventDefault();
//Get ID of the modal being deleted
modal_id = $(this).closest('tr').children('td:first').text();
//Update modal to indicate value was deleted
$('#locations-' + modal_id + '-retired').val("True");
//Get stop number being removed
stop_number = $(this).closest('tr').find(".stop-number").val()
//Update stop #
$('.stop-number').each(function(){
if($(this).val() > stop_number) {
$(this).val($(this).val() - 1);
}
});
var tr = $(this).closest("tr");
$('#sample_2').dataTable().fnDeleteRow(tr.index());
});
$( document ).on('click', '.edit-modal', function(e) {
modal_id = $(this).closest('tr').children('td:first').text();
$('#responsive-' + $.trim(modal_id)).find('.save-modal').text("Update");
$('#responsive-' + $.trim(modal_id)).find('.save-modal').addClass("update-modal");
$('#responsive-' + $.trim(modal_id)).find('.update-modal').removeClass("save-modal");
});
});
$( document ).on( "focus", "input.date-picker", function() {
$('.date-picker').datepicker({
autoclose: true,
format: "mm/dd/yyyy",
minDate: 0
});
});
$( document ).on( "click", ".save-modal", function() {
var count = $('#sample_2').dataTable().fnSettings().aoData.length + 1;
$('#sample_2').dataTable().fnAddData( [
'<input type=\"text\" id=\"locations-' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '-stop_number\" name=\"locations-' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '-stop_number\" class=\"form-control stop-number\" value=\"' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '\"> <p style=\"display:none;\" class=\"modal-id\">' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '<\/p>',
$('#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=\"edit-modal\" href=\"#responsive-' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '\" data-toggle=\"modal\">Edit<\/a>/<a class=\"delete-row\" href=\"\">Delete<\/a>' ]
);
$('.new-modal').prop('href', '#responsive-' + (count + 1));
});
$( document ).on( "click", ".update-modal", function() {
var modal_id = $(this).closest(".modal.fade").children("p").text();
//alert($(this).closest(".form-control.stop-number").length);
$('#sample_2').dataTable().fnUpdate(
['<input type=\"text\" id=\"locations-' + modal_id + '-stop_number\" class=\"form-control stop-number\" value=\"' + modal_id + '\"> <p style=\"display:none;\" class=\"modal-id\">' + modal_id + '<\/p>',
$('#locations-' + modal_id + '-address1').val(),
$('#locations-' + modal_id + '-city').val(),
$('#locations-' + modal_id + '-state').val(),
$('#locations-' + modal_id + '-postal_code').val(),
$('#locations-' + modal_id + '-pickup_weight').val(),
$('#locations-' + modal_id + '-delivery_weight').val(),
$('#locations-' + modal_id + '-arrival_date').val(),
'<a class=\"edit-modal\" href=\"#responsive-' + modal_id + '\" data-toggle=\"modal\">Edit<\/a>/<a class=\"delete-row\" href=\"\">Delete<\/a>'
], $('td').filter(function() {
return $(this).children("p").text() == modal_id;
}).closest('tr').index());
});
function create_modal(index){
alert('creating modal: ' + index);
var modal = '<div id=\"responsive-' + index + '\" class=\"modal fade\" tabindex=\"-1\" data-width=\"840\" style=\"display: none;\">' +
' <p style=\"display:none;\" class=\"modal-id\">' + index + '<\/p>' +
' <div class=\"modal-header\" id=\"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>' +
' <input type=\"text\" id=\"locations-' + index + '-retired\" name=\"locations-' + index + '-retired\" class=\"form-control\" value=\"'+index+'\">' +
' <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\">' +
' <input type=\"hidden\" id=\"locations-' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '-stop_number\" name=\"locations-' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '-stop_number\" class=\"form-control stop-number\" value=\"' + ($('#sample_2').dataTable().fnSettings().aoData.length + 1) + '\">' +
' <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-container").append(modal);
}
</script>
答案 0 :(得分：0)
问题是我在create_modal实体中使用相同的想法重新创建模态。我把它改成了：
$(".new-modal").click(function(){
create_modal($('#sample_2').dataTable().fnSettings().aoData.length + 1);
});
要：
$(".new-modal").click(function(){
create_modal($('.modal.fade').length + 1);
});