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

Question

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

这里是相关的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 使工具提示与 ajax 数据源一起使用 和 fnCreatedCell 。注意数据表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...