bootstrap数据切换不适用于动态创建的控件

如何解决bootstrap数据切换不适用于动态创建的控件

我正在用下面的j个查询代码创建一个动态表

下面是我的html表，我将在其中添加带有jQuery代码的行

<table id="DataTable" class="table">
            <thead>              
                <tr class="sticky-th">
                    <th width="2%" id="tdid2"></th>                    
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                </tr>
            </tfoot>
        </table>

以下用于向html表添加行的Jquery代码

function BindTable_New(data) {
    debugger;
    $('#DataTable tbody').empty();     

        $.each(data,function (i,item) {
            var rows = "<tr class= 'hovered-row' > \
                                    <td width='100%'><i class='fa fa-trash fa-lg text-primary delete-icon' data-toggle='collapse' data-placement='bottom' data-original-title='C'  id = 'delicon' aria-hidden='true'></i></td></tr>";
            $('#DataTable tbody').append(rows);
        });
  
}

在文档中添加了以下jquery代码。准备带来切换工具提示

 $('.delete-icon').tooltip({
        delay: 500,placement: "bottom",title: "testing",html: true
    }); 


    $('body').on('mouseenter','#FiscalPeriodDataTable',function () {
       
        if ($(this).attr('data-toggle') != 'popover') {
            console.log('calling12');
            $(this).popover({
                container: 'body',placement: 'left',trigger: 'hover'
            }).popover('show');
        }
    });

解决方法

再次更新...

我终于明白了您的代码中存在的问题...

您只需要一个工具提示，但是您使用data-toggle="collapse" ....所以它不起作用~~~~

因此将其更改为data-toggle="tooltip"，添加title="what you want to show"，最后使用$('[data-toggle="tooltip"]').tooltip()启用工具提示功能。

Tooltip