如何将 bootstrap.tooltips 插件应用于动态生成的元素？

Question

我正在尝试使用来自 AJAX 提要的数据表创建动态 td 元素。

这是该列的相关aoColumnDefs：

"aoColumnDefs": [
    {
        "mRender":function(data, type, row) {
            return '<td class="ms">' +
                        '<div class="btn-group1">' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' +
                                '<i class="gicon-edit"></i>' +
                            '</a> ' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' +
                                '<i class="gicon-eye-open"></i>' +
                            '</a>' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' +
                                '<i class="gicon-remove"></i>' +
                            '</a>' +
                        '</div>' +
                    '</td>';
        },
        "aTargets":[7]
    },

如您所见，我需要在创建行后处理此问题，以将 bootstrap.tooltips 插件应用于 <a> 元素。

这是我尝试过的，以及 jQuery 选择器的其他组合：

"fnCreatedRow": function(nRow, aData, iDataIndex) {
    $("a").tooltip();
},

在尝试让插件增强我的按钮并使工具提示出现在悬停时，我没有尝试过任何方法，它们具有正确的 CSS，因此它们不是不可见的，因为这个确切的 HTML 和 CSS 在静态 HTML 文件中工作无需动态创建元素。

Answer 1

我相信您可以使用 mRender 和 fnCreatedCell 使工具提示与 ajax 数据源一起使用。注意数据表reference page 并将fnCreatedCell 与fnCreatedRow 进行比较。

HTML

<table id="example" class="table table-condensed">
    <thead>
        <tr>
            <th>Vegetable</th>
            <th>Fruit</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript（或至少是调用数据表的相关部分）

$('#example').dataTable({
    "aaData": aaData,
    // other set up for datatables left out for the sake of getting to the main issue...
    "aoColumnDefs": [
        { "aTargets": [0],
            "mData": "VegetableName",
            "sWidth": "150px"
        },
        { "aTargets": [1],
            "mData": "FruitName",
            "sWidth": "150px"
        },
        { "aTargets": [2],
            "mData": "LoansOpenedThisDay",
            "mRender": function (data, type, full) {
            // Note: 
            // not manually coding the '<td>' as in the question.           
                return   '<div class="btn-group1">' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' +
                                '<i class="gicon-edit"></i>' +
                            '</a> ' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' +
                                '<i class="gicon-eye-open"></i>' +
                            '</a>' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' +
                                '<i class="gicon-remove"></i>' +
                            '</a>' +
                        '</div>';               
            },
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                //  console.log( nTd );
                $("a", nTd).tooltip();
            }
        }
    ],
    // more datatables set up...