我在bootstrap模式中创建数据表，并且它在第一次模态打开时工作正常，但是当重新打开模态时，数据表函数不起作用。
$("#unitTypePopupModal .modal-body").empty();
var html = '<div class="container-fluid col-md-12">';
html += '<div class="row">';
html += '<div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">';
html += '<div class="panel panel-default">';
html += '<div class="panel-body">';
html += '<div class="text-center">';
html += '<img src="Images/add-circle.png" class="login" height="70" />';
html += '<h2 class="text-center">Units</h2>';
html += '<div class="panel-body">';
html += '<form id="unitTypePopupForm" name="unitTypePopupForm" role="form" class="form form-horizontal" method="post">';
//html += '<fieldset>';
html += '<div class="form-group">';
html += '<div id="table-container" style="padding:1%;">';
//if (UnitTypeData.length > 0) {
html += '<div class="table-responsive">';
html += '<table id="unitTypesList" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">';
html += '<thead>';
html += '<tr>';
html += '<th>' + '#' + '</th>';
html += '<th>' + 'UnitType Guid' + '</th>';
html += '<th>' + 'UnitType Name' + '</th>';
html += '<th>' + 'Unit List' + '</th>';
html += '<th>' + 'Operation' + '</th>';
html += '</tr>';
html += '</thead>';
html += '<tbody>';
for (var i = 0; i < UnitTypeData.length; i++) {
html += '<tr>';
html += '<td>' + '' + '</td>';
html += '<td>' + UnitTypeData[i].UnitTypeGuid + '</td>';
html += '<td>' + UnitTypeData[i].UnitTypeName + '</td>';
html += '<td>' + '<a href="#" class="unitListMenuBtn">Unit</a>' + '</td>';
html += '<td>' + '<a href="#" class="viewUnitTypeBtn"><i class="ui-tooltip fa fa-file-text-o" style="font-size: 22px;" data-original-title="View" title="View"></i></a>' + ' ' + '<a href="#" class="editUnitTypeBtn"><i class="ui-tooltip fa fa-pencil-square-o" style="font-size: 22px;" data-original-title="Edit" title="Edit"></i></a>' + ' ' + '<a href="#" class="deleteUnitTypeBtn"><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete" title="Delete"></i></a>' + '</td>';
html += '</tr>';
}
html += '</tbody>';
html += '</table>';
html += '</div>';
//} else {
// html += '<p>There is no Unit Type available to be displayed.</p>';
// }
html += '</div>';
html += '</div>';
//html += '</fieldset>';
html += '</form><!--/end form-->';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$("#unitTypePopupModal .modal-body").append(html);
$('#unitTypePopupModal').modal('show');
$("#unitTypePopupModal").on('show.bs.modal', function () {
$("#unitTypePopupModal .modal-body").empty();
//bootbox.alert(html);
});
$("#unitTypePopupModal").on('hiddden.bs.modal', function () {
//$("#unitTypePopupModal .modal-body").empty();
$(this).data('bs.modal', null);
});
unitTypeTableRelatedFunctions();
$('#unitTypePopupForm').validate({ // initialize plugin
ignore: ":not(:visible)",
rules: {
unitTypeName: {
required: true,
noSpace: true
}
},
messages: {
unitTypeName: {
required: "Please Enter the UnitType Name.",
noSpace: "UnitType Name cannot be empty."
}
},
//errorPlacement: function (error, element) {
// switch (element.attr("name")) {
// case "dpProgressMonth":
// error.insertAfter($("#dpProgressMonth"));
// break;
// default:
// //nothing
// }
//}
});
以下函数称为
unitTypeTableRelatedFunctions = function () {
var unitTypeEditing = null;
var table = $('#unitTypesList').DataTable({
responsive: true,
pagingType: "full_numbers",
searchHighlight: true,
stateSave: true,
destroy: true,
//orderable: false,
columnDefs: [
{
targets: [0],
orderable: false,
searchable: false
},
{
className: 'never',//className:'hidden',
targets: [1],
visible: false,
orderable: false,
searchable: false
},
{
targets: [2],
orderable: true
},
{
targets: [3],
orderable: false
},
{
targets: [4],
orderable: false,
searchable: false,
//defaultContent: '<a class="viewWorkItemSubHeadBtn" onclick="editBtnClicked(this);"><i class="ui-tooltip fa fa-file-text-o" style="font-size: 22px;" data-original-title="View"></i></a> <a class="editWorkItemSubHeadBtn"><i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i></a> <a class="deleteWorkItemSubHeadBtn"><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i></a>'
}
],
order: [[2, 'desc']],
language: {
//"lengthMenu": "Display _MENU_ records per page",
lengthMenu: 'Display <select>' +
'<option value="5">5</option>' +
'<option value="10">10</option>' +
'<option value="15">15</option>' +
'<option value="20">20</option>' +
'<option value="25">25</option>' +
'<option value="30">30</option>' +
'<option value="35">35</option>' +
'<option value="40">40</option>' +
'<option value="45">45</option>' +
'<option value="50">50</option>' +
'<option value="100">100</option>' +
'<option value="-1">All</option>' +
'</select> records per page',
zeroRecords: "Nothing found - sorry",
info: "Showing page _PAGE_ of _PAGES_",
infoEmpty: "No records available",
infoFiltered: "(filtered from _MAX_ total records)"
},
pageLength: 5,
//select: {
// style: 'os',
// blurable: true
//},
dom: '<"top"<"pull-left"B><f>>rt<"bottom"i<"pull-left"l><p>><"clear">',
//dom: '<lf<t>ip>',
//dom: '<"wrapper"flipt>',
//dom: '<"top"i>rt<"bottom"flp><"clear">',
buttons: [
{
text: '+ Create New UnitType',
className: 'btn-success addNewUnitTypeBtn',
action: function (e, dt, node, config) {
e.preventDefault();
addNewUnitType();
}
}
]
});
table.on('order.dt search.dt', function () {
table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
$('#unitTypePopupModal').on('click', '#unitTypesList a.editUnitTypeBtn', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var selectedRow = $(this).parents('tr')[0];
//var selectedRowIndex = table.row($(this).parents('tr')).index();
if (unitTypeEditing !== null && unitTypeEditing != selectedRow) {
/* A different row is being edited - the edit should be cancelled and this row edited */
restoreUnitTypeRowData(table, unitTypeEditing);
editUnitTypeRow(table, selectedRow);
unitTypeEditing = selectedRow;
addUnitTypeBtn.enable();
$('#unitTypePopupModal input#unitTypeName').focus();
}
//else if (nEditing == selectedRow && this.innerHTML == "Save") {
// /* This row is being edited and should be saved */
// saveRow(oTable, nEditing);
// nEditing = null;
// createBtnClicked = 0;
//}
else {
/* No row currently being edited */
editUnitTypeRow(table, selectedRow);
unitTypeEditing = selectedRow;
addUnitTypeBtn.enable();
$('#unitTypePopupModal input#unitTypeName').focus();
}
});
单击编辑按钮时，将触发click事件并调用以下函数：
editUnitTypeRow(table, selectedRow)
函数体是：
editUnitTypeRow = function (table, selectedRow) {
var selectedRowData = table.row(selectedRow).data();
var availableTds = $('>td', selectedRow);
availableTds[1].innerHTML = '<input type="text" id="unitTypeName" name="unitTypeName" placeholder="UnitType Name" class="form-control text-capitalize" value="' + selectedRowData[2] + '">';//UnitType
availableTds[2].innerHTML = '';
availableTds[3].innerHTML = '<a href="#" class="updateUnitTypeBtn"><i class="ui-tooltip fa fa-floppy-o" style="font-size: 22px;" data-original-title="Save" title="Save"></i></a>' + ' ' + '<a href="#" class="cancelUnitTypeEditBtn"><i class="ui-tooltip fa fa-times-circle-o" style="font-size: 22px;" data-original-title="Cancel" title="Cancel"></i></a>'
}
在此函数中，表行数据未正确提取。
我在页面重新加载后第一次打开模态时获取数据但是如果我第二次打开模态时table.row（）函数没有获取行数据，但数据存在于行中
html代码如下：
<div id="unitTypePopupModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" style="overflow-y:initial !important;">
<div class="modal-content">
<div class="modal-header" style="display:none"></div>
<%--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">What's My Password?</h1>
</div>--%>
<div class="modal-body" style="max-height:calc(100vh - 200px); overflow-y: auto;">
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</div>
弹出模式中的点击最初在页面加载后起作用，但在我们重新打开弹出模式后不起作用。
答案 0 :(得分：0)
由于您正在添加html内容，因此您需要以不同的方式委派事件
这样的代码只有在加载时页面上存在对象#selector时才会执行
$('#selector').on('click', function(){...etc...});
如果你想将事件委托给dinamically添加的元素，你必须这样做：
$('#container').on('click', '#selector', function(){...etc...});
自页面加载以来，DOM中存在#container。如果你想100％确定不要犯错误，只需使用$(document.body).on(...)，但由于正文中充满了元素，它会慢一点代码
在小提琴＃12之后编辑：对不起，但你的代码太拥挤了，无法轻易找到解决方案。我试图记录一些数据，我看到当你关闭并重新打开模态时，当你点击“编辑”和“取消”时我都会触发两次事件（我猜其他按钮的行为相同），所以它实际上正常工作，但是调用它的secont时间，unitTypeEditing为空，这就是输入字段没有隐藏的原因。
我建议你切换到x-editable插件，这应该避免恢复以前的数据有任何问题，这将导致更少的代码编写。