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

Question

我正在尝试td使用AJAX提要中的Datatables 创建动态元素.

以下是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数据源一起使用.请注意数据表参考页面,并将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...