DataTable子行内模态框无法打开的问题修复请求

嘿，我一眼就看出问题出在哪了——你的模态框触发链接是动态生成的（只有点击子行展开后才会出现在DOM里），而你原来的事件绑定逻辑是在页面加载完成后，直接给当时存在的.openPopup元素绑定点击事件。这时候子行里的链接还没生成呢，自然不会响应点击！

解决方案：使用事件委托 #

我们需要把点击事件绑定到一个页面加载时就已存在的父元素上（比如DataTable的tbody），通过事件冒泡的机制来监听动态生成元素的点击。这样不管.openPopup是何时生成的，只要它在这个父元素范围内，点击事件就能被捕获到。

修改后的完整代码 #

function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">'+'
        <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+'
            <tr>'+'
                <th>Operatőr 2:</th>'+'
                <td>'+d.doctor2+'</td>'+'
                <td style="width:100px"></td>'+'
                <th>Leírás: </th>'+'
                <td><a href="javascript:void(0);" data-href="getContent.php?id='+d.patientid+'" class="openPopup">'+d.description+'</a></td>'+'
                <td style="width:100px"></td>'+'
                <th>TAJ:</th>'+'
                <td> '+d.patientid+'</td>'+'
            </tr>'+'
        </table>'+'
    </div>';
}
$(document).ready(function() {
    var table = $('#videos').DataTable( {
        "ajax": 'data.php',
        "columns": [
            { "class": 'details-control', "orderable": false, "data": null, "defaultContent": '' },
            { "data": "patient" },
            { "data": "patientid" },
            { "data": "diagnose" },
            { "data": "surgerydate" },
            { "data": "description" },
            { "data": "doctor1" },
            { "data": "uploader", "visible": false }
        ]
    });

    // Add event listener for opening and closing details
    $('#videos tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open this row
            row.child( format(row.data()), 'no-padding' ).show();
            tr.addClass('shown');
            $('div.slider', row.child()).slideDown();
        }
    });

    //Modal description - 改用事件委托绑定到已存在的tbody元素
    $('#videos tbody').on('click', '.openPopup', function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true});
        });
    });
});

关键修改点 #

我只调整了模态框的事件绑定逻辑：

// 原来的写法（仅对页面加载时已存在的元素生效）
$('.openPopup').on('click',function(){...})

// 修改后的写法（事件委托，支持动态生成元素）
$('#videos tbody').on('click', '.openPopup', function(){...})

这样修改后，不管子行什么时候展开生成链接，点击.openPopup都能正常触发模态框了！

内容的提问来源于stack exchange，提问作者Roland Nagy