Twitter bootstrap 3 Datatables.row（）无法在引导模式下重新打开

我在bootstrap模式中创建datatables，它在第一次打开模式时工作正常，但是当模式重新打开时，datatable函数不工作

 $("#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>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<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>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<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
    //    }
    //}
});

职能机构是：

 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>' + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<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>'

editUnitTypeRow=函数（表，selectedRow）{
var selectedRowData=table.row（selectedRow.data（）；
var availableTds=$（'>td'，selectedRow）；
availableTds[1]。innerHTML=''；//单元类型
availableTds[2]。innerHTML=''；
availableTds[3]。innerHTML='+'''

}

在此函数中，未正确提取表行数据

当重新加载页面后第一次打开模式时，我正在获取数据，但如果我第二次打开模式，则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>

由于您是以友好的方式添加html内容，因此需要以不同的方式委派事件

只有在加载时页面上存在对象#选择器时，才会执行这样的代码

$('#selector').on('click', function(){...etc...});

如果要将事件委托给随机添加的元素，必须执行以下操作：

$('#container').on('click', '#selector', function(){...etc...});

其中，
#容器
自页面加载以来就存在于DOM中。如果您想100%确保不出错，只需在（…）

上使用

$（document.body）.on，但它会使代码速度减慢一点，因为正文中充满了元素

12：很抱歉，你的代码太拥挤了，很难找到解决方案。我试图记录一些数据，我发现当您关闭并重新打开模式时，当您单击“编辑”和“取消”时，事件会触发两次（我猜其他按钮的行为相同），因此它实际上工作正常，但调用第二次时，
unitTypeEditing
为空，这就是输入字段未隐藏的原因。。
我建议您切换到x-editable插件，这将避免恢复以前的数据时出现任何问题，并将导致编写的代码大大减少。
可以尝试此
$（'modalselector'）。on（'hidden.bs.modal'，function（）{$（this.removeData（'bs.modal'）；}）当modal hideI也这样做时，清除modal中的数据。但是这也不起作用。然后尝试在modal show事件中初始化table.row（）函数，看看它是否有不同。整个表都在modal.openi中初始化。我这样做的方式与在html中添加弹出模式的方式相同，并且unitTypePopupModal在页面加载时可用。你能提供小提琴吗？我的意思是，至少是一个工作的提琴，显示您的错误：）这里我添加了js库和BS CSS最新的提琴是：在这里，您可以检查单击按钮第一次工作，但在我们重新打开模型后不工作，但问题仍然存在。
$('#selector').on('click', function(){...etc...});

$('#container').on('click', '#selector', function(){...etc...});