时间戳

首页 > 解决方案 > 引导数据切换不适用于动态创建的控件

jquery - 引导数据切换不适用于动态创建的控件

问题描述

想要实现如下图所示我正在使用以下 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>

下面的 Jquery 代码用于将行添加到 html 表中

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 代码添加到 document.ready 以带来切换工具提示

 $('.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');
        }
    });

标签： jquerybootstrap-4

解决方案

再次更新...

我终于明白你的代码有什么问题了......

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

所以改成data-toggle="tooltip", add title="what you want to show", finally$('[data-toggle="tooltip"]').tooltip()用来启用工具提示功能。

工具提示

推荐阅读