Datatables .row() 无法在 bootstrap 模式下重新打开

Question

我正在 bootstrap 模态中创建数据 tables 并且它在第一次模态打开时工作正常，但是当模态重新打开时，数据 table 起作用不工作。

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

调用以下函数

   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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="editWorkItemSubHeadBtn"><i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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();
    }
});

单击编辑按钮时，将触发单击事件并调用以下函数：

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

}

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

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

弹出模式中的点击最初在页面加载后起作用，但在我们重新打开弹出模式后不起作用。

Answer 1

由于您是动态添加 html 内容，因此您需要以不同的方式委托事件

只有当对象 #selector 在加载时出现在页面上时才会执行这样的代码

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

如果你想将事件委托给动态添加的元素，你必须这样做：

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

其中 #container 自页面加载后存在于 DOM 中。如果您想 100% 确保不出错，只需使用 $(document.body).on(...)，但它会减慢您的代码速度，因为正文中充满了元素

在 fiddle #12 之后编辑：很抱歉，您的代码太拥挤了，很难找到解决方案。我尝试记录一些数据，我发现当您关闭并重新打开模式时，当您单击 "Edit" 和 "Cancel" 时事件会触发两次（我猜其他按钮的行为相同），所以它实际上工作正常，但第二次调用时，unitTypeEditing 为空，这就是输入字段未隐藏的原因。我建议您切换到 x-editable 插件，这应该可以避免恢复以前数据的任何问题，并且可以减少编写的代码。

Datatables .row() 无法在 bootstrap 模式下重新打开

Datatables .row() not working on reopening in bootstrap modal

datatables

bootstrap-modal

twitter-bootstrap-3

datatables-1.10