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

Question

我正在尝试使用AJAX feed中的Datatables创建动态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...